原文

豐富的離線體驗、定期后臺同步、推送通知——通常需要原生應用程序的功能——正在網絡上出現。 Service Worker 提供了所有這些功能所依賴的技術基礎。

What is a service worker

Service Worker 是瀏覽器在后臺運行的腳本，與網頁分開，為不需要網頁或用戶交互的功能打開大門。 今天，它們已經包含推送通知和后臺同步等功能。 將來，Service Worker 可能會支持其他功能，例如定期同步或地理圍欄。 本教程中討論的核心功能是攔截和處理網絡請求的能力，包括以編程方式管理響應緩存。

這是一個如此令人興奮的 API 的原因是它允許您支持離線體驗，讓開發人員完全控制體驗。

在 Service Worker 之前，還有一個 API 可以為用戶提供網絡離線體驗，稱為 AppCache。 服務工作者旨在避免 AppCache API 的許多問題。

Service Worker 的注意事項：

它是一個 JavaScript Worker，所以它不能直接訪問 DOM。

相反，Service Worker 可以通過響應通過 postMessage 接口發送的消息與其控制的頁面進行通信，如果需要，這些頁面可以操作 DOM。

Service Worker 是一個可編程的網絡代理，允許您控制如何處理來自您的頁面的網絡請求。

它在不使用時終止，并在下一次需要時重新啟動，因此您不能依賴 Service Worker 的 onfetch 和 onmessage 處理程序中的全局狀態。 如果您需要在重啟后保留和重用某些信息，Service Worker 確實可以訪問 IndexedDB API。

The service worker life cycle

Service Worker 的生命周期與您的網頁完全分開。

要為您的站點安裝 Service Worker，您需要在頁面的 JavaScript 中注冊它。注冊 Service Worker 將導致瀏覽器在后臺啟動 Service Worker 安裝步驟。

通常在安裝步驟中，您需要緩存一些靜態資產。如果所有文件都被成功緩存，那么 Service Worker 就會被安裝。如果任何文件無法下載和緩存，則安裝步驟將失敗并且 Service Worker 將不會激活（即不會被安裝）。如果發生這種情況，請不要擔心，它下次會再試一次。但這意味著如果它確實安裝了，您就知道緩存中已經有了這些靜態資產。

安裝后，將執行激活步驟，這是處理舊緩存管理的絕佳機會，我們將在 Service Worker 更新部分進行介紹。

在激活步驟之后，Service Worker 將控制其范圍內的所有頁面，盡管第一次注冊 Service Worker 的頁面在再次加載之前不會受到控制。一旦 Service Worker 處于控制狀態，它將處于兩種狀態之一：Service Worker 將被終止以節省內存，或者它會處理從您的頁面發出網絡請求或消息時發生的 fetch 和 message 事件。

下面是首次安裝時 Service Worker 生命周期的過度簡化版本。

Register a service worker

要安裝 Service Worker，您需要通過在您的頁面中注冊它來啟動該過程。 這會告訴瀏覽器您的 Service Worker JavaScript 文件所在的位置。

if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('/sw.js').then(function(registration) {// Registration was successfulconsole.log('ServiceWorker registration successful with scope: ', registration.scope);}, function(err) {// registration failed :(console.log('ServiceWorker registration failed: ', err);});}); }

此代碼檢查 service worker API 是否可用，如果可用，則在頁面加載后注冊 /sw.js 中的 service worker。

您可以在每次頁面加載時調用 register() 而不用擔心； 瀏覽器會判斷 service worker 是否已經注冊并相應地處理它。

register() 方法的一個微妙之處是 service worker 文件的位置。 在這種情況下，您會注意到 service worker 文件位于域的根目錄。 這意味著服務工作者的范圍將是整個源。

換句話說，這個 Service Worker 將接收該域上所有內容的 fetch 事件。 如果我們在 /example/sw.js 注冊 Service Worker 文件，那么 Service Worker 只會看到 URL 以 /example/ 開頭的頁面（即 /example/page1/、/example/page2/）的 fetch 事件。

現在，您可以通過轉到 chrome://inspect/#service-workers 并查找您的站點來檢查 Service Worker 是否已啟用。

您可能會發現在隱身窗口中測試您的 Service Worker 很有用，這樣您就可以關閉并重新打開，因為之前的 Service Worker 不會影響新窗口。 一旦該窗口關閉，從隱身窗口中創建的任何注冊和緩存都將被清除。

Install a service worker

在受控頁面啟動注冊過程后，讓我們轉向處理安裝事件的服務工作者腳本的觀點。

對于最基本的示例，您需要為安裝事件定義回調并決定要緩存哪些文件。

self.addEventListener('install', function(event) {// Perform install steps });

在我們的安裝回調中，我們需要執行以下步驟：

打開緩存。

緩存我們的文件。

確認是否緩存了所有必需的資產。

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = ['/','/styles/main.css','/script/main.js' ];self.addEventListener('install', function(event) {// Perform install stepsevent.waitUntil(caches.open(CACHE_NAME).then(function(cache) {console.log('Opened cache');return cache.addAll(urlsToCache);})); });

在這里你可以看到我們用我們想要的緩存名稱調用 caches.open() ，之后我們調用 cache.addAll() 并傳入我們的文件數組。 這是一個承諾鏈（caches.open() 和 cache.addAll()）。 event.waitUntil() 方法接受一個 promise 并使用它來知道安裝需要多長時間，以及它是否成功。

如果所有文件都成功緩存，則將安裝 Service Worker。 如果任何文件下載失敗，則安裝步驟將失敗。 這允許您依賴您定義的所有資產，但確實意味著您需要小心您決定在安裝步驟中緩存的文件列表。 定義一長串文件會增加一個文件無法緩存的可能性，從而導致您的 Service Worker 無法安裝。

這只是一個示例，您可以在安裝事件中執行其他任務或完全避免設置安裝事件偵聽器。

Cache and return requests

現在您已經安裝了 Service Worker，您可能想要返回緩存的響應之一，對嗎？

安裝 Service Worker 并且用戶導航到不同頁面或刷新后，Service Worker 將開始接收 fetch 事件，示例如下。

self.addEventListener('fetch', function(event) {event.respondWith(caches.match(event.request).then(function(response) {// Cache hit - return responseif (response) {return response;}return fetch(event.request);})); });

這里我們定義了 fetch 事件，在 event.respondWith() 中，我們從 caches.match() 中傳入了一個 promise。 此方法查看請求并從您的 Service Worker 創建的任何緩存中查找任何緩存結果。

如果我們有匹配的響應，我們返回緩存的值，否則我們返回調用 fetch 的結果，如果可以從網絡中檢索到任何東西，它將發出網絡請求并返回數據。 這是一個簡單的示例，使用我們在安裝步驟中緩存的任何緩存資產。

如果我們想累積緩存新請求，我們可以通過處理 fetch 請求的響應然后將其添加到緩存中來實現，如下所示。

self.addEventListener('fetch', function(event) {event.respondWith(caches.match(event.request).then(function(response) {// Cache hit - return responseif (response) {return response;}return fetch(event.request).then(function(response) {// Check if we received a valid responseif(!response || response.status !== 200 || response.type !== 'basic') {return response;}// IMPORTANT: Clone the response. A response is a stream// and because we want the browser to consume the response// as well as the cache consuming the response, we need// to clone it so we have two streams.var responseToCache = response.clone();caches.open(CACHE_NAME).then(function(cache) {cache.put(event.request, responseToCache);});return response;});})); });

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Service Worker 概念简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。