摘要：如果返回的被拒，另一個同步事件被自動地開始重試操作，直到返回一個成功狀態的。推送機制使得服務器能夠向發送信息，然后將信息展示給用戶才是消息通知。然后它們可以發送消息通知，或者是更新的狀態。

原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16  
作者：Flavio Copes  
摘要：這篇文章簡述service worker作為PWA核心技術如何實現資源緩存和消息推送的功能，還幫助讀者理解service worker的生命周期。

Service worker是漸進式網絡應用（Progressive Web Apps）的核心。它們幫助我們實現原本是原生app才有資源緩存和消息推送兩大特性。

Service worker是你的網頁與網絡間的代理，它能夠攔截和緩存來往的網絡請求。這可以幫助你的應用創造一個離線環境下也能良好訪問的用戶體驗。

首先介紹一下web worker的概念。它是一個與指定網頁相關聯的JS文件，獨立與主線程運行在一個特定的上下文環境中，這樣就不會為了計算數據去犧牲UI的性能，從而避免了阻塞的情況。而service worker是一種特殊的web worker。

而正是由于它是一個子線程，所以無法操作DOM。同樣也無法訪問Local Storage API和XHR API。它只能通過Channel Messaging API和主線程通信。

Service Worker能夠與下面幾個API合作：

Promises

Fetch API

Cache API

只有在HTTPS協議下的網頁里它們才會起作用。（不過不包括本地的網絡請求，因為它們不需要保持安全連接。這樣也方便我們調試。）

Service worker能夠獨立于與它關聯的應用程序運行，并且在這些程序處于非活躍狀態下仍可以接收消息。

讓我來舉幾個場景：

app處于后臺非活躍狀態下運行；

app被關閉；

呈現你網頁的瀏覽器被關閉；

那么service worker將不受影響地繼續工作。

Service worker的有用之處在于：

它們可以當作緩沖層，處理網絡請求和緩存離線所需的資源；

它們可以用來推送消息。

Service worker只在需要的時候運行，其他情況下都會停止工作。

對于傳統網頁，離線情況下的用戶體驗非常糟糕。如果用戶沒有聯網，移動端的web應用一般是直接停止工作。反觀原生應用，會展示給用戶一些友好的提示信息。

下面這張圖是Chrome瀏覽器中離線網頁顯示的內容，顯然這并不算是一個友好的提示信息：

也許唯一不錯的地方是你可以通過點擊恐龍來免費玩一個游戲，不過相信你很快就會變得不耐煩了。

不久之前，HTML5標準下的AppCache可以讓web應用緩存離線資源，但是它缺乏靈活性并且有一些令人困惑的行為，這也說明它無法勝任支持離線這項工作。

而現在，service worker成了離線緩存的新標準。

那么，它實現哪些緩存呢？

像圖片、CSS文件和JS文件都會在app的使用過程中重復用到。這些資源可以在app打開的第一時間緩存好。

這也是所謂的APP殼架構（ App Shell architecture）的基礎。

我們使用Fetch API可以對服務器返回的響應報文進行編輯，根據服務器是否可達來決定是否使用緩存中的響應報文代替。

一個service worker在啟動前經歷了三步：

注冊（Registration)

安裝（Installation）

激活（Activation）

注冊階段是通知瀏覽器service worker的存在，并且在后臺開始安裝。

下面是寫在worker.js中注冊一個service worker的代碼：

if ("serviceWorker" in navigator) { 
  window.addEventListener("load", () => {   
    navigator.serviceWorker.register("/worker.js") 
    .then((registration) => { 
      console.log("Service Worker registration completed with scope: ", registration.scope) 
    }, (err) => { 
      console.log("Service Worker registration failed", err)
    })
  })
} else { 
  console.log("Service Workers not supported") 
}

無論這段代碼被調用多少次，瀏覽器始終只會在service worker之前沒有注冊過或是需要更新的情況下進入注冊階段。

register函數需要一個scope參數來指明你的web應用被該service worker管理的文件所在路徑。

這個參數的默認值是所有文件以及service worker文件父級目錄下的所有子文件夾。所以如果你把service worker文件放在根目錄下，它會管理整個web應用。而如果在某個子文件夾中，它只會管理該路徑能夠訪問的網頁。

下面這個例子通過指定scope參數為/notifications/目錄來注冊一個service worker。

navigator.serviceWorker.register("/worker.js", { 
  scope: "/notifications/" 
})

結尾的/非常重要，可以避免/notification頁面觸發service worker。而如果寫成下面這樣：

{ scope: "/notifications" }

那么service worker就將同樣作用于/notification頁面。

注意：service worker無法控制自身所在目錄以外的文件。也就是說，如果service worker文件被放在/notification文件夾下，它無法控制根目錄/或其他不屬于/notification的文件。

如果瀏覽器發現一個service worker過期或之前沒有注冊過，那么它將安裝這個service worker。

self.addEventListener("install", (event) => { 
  //... 
});

這是使用service worker初始化緩存，然后利用Cache API來緩存APP shell和靜態資源的好時機。

一旦service worker注冊并安裝成功后 ，我們來到了第三階段：激活。

這時，service worker能夠在加載新頁面時開始工作。

它不能作用于激活前已經加載過的頁面，所以只有重啟app或是刷新已加載頁面兩種方式來使它工作。

self.addEventListener("activate", (event) => { 
  //... 
});

監聽這個事件可以用來清除舊緩存或者是刪除新版service worker不需要的舊資源。

你僅僅是修改一字節的文件就需要更新一次service worker。它會在注冊的代碼再次執行時被更新。

更新后的service worker只有在所有頁面都被關閉后才開始代替之前的service worker工作。如果僅僅是刷新頁面是不會起作用的，因為之前的service worker仍然在運行且沒有被刪除。

這種機制保證了更新不會讓之前在運行的app或網頁崩潰。

當瀏覽器發送網絡請求時就會觸發Fetch事件。

我們借此可以在請求發送時檢查緩存中是否已經存儲所需資源。

舉個例子，下面的代碼使用了Cache API來檢查請求的URL是否已經被緩存。如果是，那么返回緩存中的響應數據，否則會發送請求然后返回響應數據。

self.addEventListener("fetch", (event) => {
  event.respondWith( 
    caches.match(event.request) 
      .then((response) => { 
        if (response) { 
          //entry found in cache 
          return response 
        } 
        return fetch(event.request) 
      } 
    ) 
  ) 
})

當用戶在離線狀態下發送網絡請求時，Background Sync這個API將延遲該請求直到用戶脫離離線狀態。

這保證了用戶在離線狀態下仍然可以使用并操作app，這些離線操作會保存在隊列中，以便在連接網絡后向服務端發出響應請求。（是不是比展示一個無休止的loading圖標要好多了？）

navigator.serviceWorker.ready.then((swRegistration) => { 
    //注冊一個事件event1
  return swRegistration.sync.register("event1") 
});

下面的代碼是在service worker中監聽這個事件：

self.addEventListener("sync", (event) => { 
  if (event.tag == "event1") { 
    event.waitUntil(doSomething()) 
  } 
})

doSomething()返回一個promise。如果返回的promise被拒，另一個同步事件被自動地開始重試操作，直到返回一個成功狀態的promise。

這也使得app能夠在聯網時立刻更新服務器發來的數據。

Service worker使得web應用可以像原生一樣推送消息給用戶。

事實上，推送和消息通知是兩個不同的概念，它們組合而成的技術才是我們熟悉的消息推送。推送機制使得服務器能夠向service worker發送信息，然后service worker將信息展示給用戶才是消息通知。

由于service worker可以在app關閉后繼續運行，所以它們能夠一直監聽推送事件。然后它們可以發送消息通知，或者是更新app的狀態。

推送事件會在后端通過瀏覽器推送服務后啟動，比如說Firebase的推送服務。

下面的代碼演示了web worker如何監聽push事件：

self.addEventListener("push", (event) => { 
  console.log("Received a push event", event) 
  const options = { 
    title: "I got a message for you!", 
    body: "Here is the body of the message", 
    icon: "/img/icon-192x192.png", 
    tag: "tag-for-this-notification", 
  } 
  event.waitUntil( 
    self.registration.showNotification(title, options) 
  ) 
})

如果你的代碼中包含console.log或是其他類似的控制臺輸出語句，務必打開Chrome開發工具中的Preserve log功能。

否則的話，因為service worker在網頁加載前就開始執行，而此時控制臺會被清空，所以你無法看到任何日志輸出。

非常感謝閱讀本篇教程，事實上，關于PWA還有很多要學習的知識。如果您有什么見解歡迎在下面評論。

譯者注：主流瀏覽器開始逐漸支持service worker，以后PWA是否會真的與原生平分秋色呢？未來如何，我想現在多了解一點PWA的知識總不會壞事。  
項目地址：https://github.com/WhiteYin/translation