Web Worker 與 Service Worker

介紹

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

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

會盡力詳細解釋。

這兩者之間的共同點是

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

網路工作者

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

服務人員

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

Service Worker 的生命週期

1。報名

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

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

2。安裝

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

下面的程式碼我們需要將其寫入service-worker.js

self.addEventListener('install', (event) => {
// do your operations
})

3。啟動

• 安裝後會跳到這裡

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4。空閒

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

5。取得/訊息

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

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6。終止

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

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

範例：-

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

chrome://serviceworker-internals/

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

注意：-
對於這個具體我們可以使用push來喚醒，但是這個使用必須給Browser一個Notification權限，否則沒辦法。

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

1。取得事件

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

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2。留言

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

   self.addEventListener('message', (event) => {
// Handle message Event
})

3。推

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

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4。同步事件

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

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

參考

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

以上是Web Worker 與 Service Worker的詳細內容。更多資訊請關注PHP中文網其他相關文章！