介紹

當我第一次聽到這些術語時，我想，好吧，他們正在用單獨的線程做同樣的事情。那為什麼我們需要這兩個術語？

但說實話，這兩個術語及其行為方式之間存在巨大差異

。

會嘗試詳細解釋。

這兩個之間的共同點是

它們在單獨的執行緒中運行，不會阻塞 Javascript 的主單執行緒。

Web Worker

這裡工作執行緒可以在不干擾主執行緒的情況下執行任務。
這些用於需要大量 CPU 的任務，例如影像操作/處理、繁重計算和資料處理。
它沒有存取DOM的能力，也不能攔截網路要求。
它沒有生命週期

服務人員

它是一種具有附加功能的網路工作者。
它可以獨立於瀏覽器運行/即使瀏覽器關閉。
它是 PWA 的核心元件，因為它們用於啟用離線支援、後台同步和推播通知等功能。
它就像是位於瀏覽器和網路之間的代理伺服器。

Service Worker 的生命週期

1。登記

在這裡，我們將告訴瀏覽器我們的 Service Worker javascript 檔案所在的位置。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

if（導航器中的「serviceWorker」）{ // 將其包裝在 try/catch/promises 中 等待 navigator.serviceWorker.register('/service-worker.js') }

2.安裝

當瀏覽器認為Service Worker是新的時，會觸發install事件。

下面的程式碼我們要寫在service-worker.js

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('安裝', (事件) => { // 進行你的操作 })

3.啟動

安裝後會跳到這裡

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('激活', (事件) => { // 執行你的操作 })

4。閒置的

當 Service Worker 不執行任何操作時，它處於空閒狀態。

5。取得/訊息

每當發出網路請求/訊息時，Service Worker 就會醒來並接管控制權

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('fetch', (event) => { // 執行你的操作 })

6。終止

如果不使用，瀏覽器將終止 Service Worker 以節省記憶體。但當我們不知道時。

它將讓服務人員保留很長時間。

例子：-

在 chrome 中打開此鏈接，您將看到許多服務工作人員掛起，您可以執行很多操作，例如檢查/啟動和發送訊息。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

chrome://serviceworker-internals/

即使瀏覽器關閉，我們如何喚醒服務人員。

筆記：-

針對這個具體我們可以使用push來喚醒，但是這個使用必須給Browser授予Notification權限，否則沒辦法。

當瀏覽器仍然開啟時，其他方法也是相關的

1。取得事件

每當發出獲取請求時都會觸發此事件。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('fetch', event => { // 處理取得事件 });

2.訊息

從另一個腳本收到訊息時會觸發此事件。 （通訊發生在 Service Worker 其他 Javascript 檔案中）

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('訊息', (事件) => { // 處理訊息事件 })

3.推

收到推播訊息時觸發此事件

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('push', (event) => { // 處理推送事件 })

4。同步事件

當收到後台同步事件時會觸發此事件。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

self.addEventListener('同步', (事件) => { // 處理後台同步事件 })

參考

https://frontendmasters.com/courses/background-javascript