Service Worker

使用者希望應用程式在網路連線速度緩慢或不穩定時可順利啟動；或 甚至可以離線使用他們會預期自己最近互動的內容 例如媒體曲目、票券和行程) 使其可供使用。 如果要求無法發揮作用，他們會預期應用程式會告訴使用者，而不是 而不是自動設定失敗或當機而他們也希望實現這些願景。阿斯 可以看到 Milliseconds 讓數百萬美元 即使載入時間縮短 0.1 秒，轉換率也最多可提升 10%。 服務工作處理程序可讓 Progressive Web App (PWA) 的 使用者期望。

作為中介軟體 Proxy，在 PWA 和伺服器之間執行裝置端，包括您自己的伺服器和跨網域伺服器。
Service Worker 的角色就像是 PWA 以及與其互動的伺服器。

如果應用程式要求受 Service Worker 範圍涵蓋的資源， Service Worker 會攔截要求並做為網路 Proxy，即使 使用者離線。然後判斷資源是否應提供來自 快取儲存空間，如果快取沒有，則會從網路提供。 或從本機演算法建立這類工作這樣一來， 提供優質體驗，例如平台應用程式 應用程式處於離線狀態。

註冊 Service Worker

您的網頁必須先註冊 您的 PWA。這表示使用者第一次開啟您的 PWA (包括所有網路) 要求會直接傳送至您的伺服器，因為 Service Worker 沒有 控管您的網頁

檢查瀏覽器是否支援 Service Worker API 後，PWA 即可 註冊 Service Worker。載入後，Service Worker 會自行設定 能夠攔截請求並供應 對應的回應

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}
嘗試註冊 Service Worker，看看 是在瀏覽器的開發人員工具中進行的操作
，瞭解如何調查及移除這項存取權。

確認是否已註冊 Service Worker

如要確認是否已註冊 Service Worker，請使用 最喜愛的瀏覽器。

使用 Firefox 和 Chromium 的瀏覽器 (Microsoft Edge、Google Chrome 或 Samsung Internet)：

  1. 開啟開發人員工具，然後按一下「Application」分頁標籤。
  2. 在左側窗格中選取「Service Workers」。
  3. 檢查服務工作處理程序的指令碼網址是否顯示了其中的狀態 「已啟用」。(詳情請參閱生命週期)。使用 Firefox 狀態可以是「執行中」或「已停止」

在 Safari 中：

  1. 按一下「開發」>Service Worker。
  2. 請查看此選單，找出來源為目前來源的項目。按一下該項目 開啟在 Service Worker 內容上的檢查器。
，瞭解如何調查及移除這項存取權。
適用於 Chrome、Firefox 和 Safari 的 Service Worker 開發人員工具。
Chrome、Firefox 和 Safari 的 Service Worker 開發人員工具。
，瞭解如何調查及移除這項存取權。

範圍

Service Worker 所處的資料夾會決定其範圍。Service Worker 位於 example.com/my-pwa/sw.js 的使用者可以控制下列位置的任何導覽： my-pwa 路徑，例如 example.com/my-pwa/demos/。Service Worker 可以 僅控管範圍內項目 (頁面、工作站，統稱「用戶端」)。 這個範圍適用於瀏覽器分頁和 PWA 視窗，

每個範圍僅允許一個 Service Worker。啟動 Service Worker 時 而且在運作時，無論有多少用戶端，通常只有一個執行個體 (PWA 視窗或瀏覽器分頁) 位於記憶體中。

Safari 採用較複雜的範圍管理功能 (稱為分區)，會影響 範圍可與跨網域 iframe 搭配使用。如要進一步瞭解 WebKit 的 請參閱他們的網誌文章。

生命週期

Service Worker 的生命週期會分別指定安裝方式 。

Service Worker 生命週期是從註冊 Service Worker 開始。 然後嘗試下載並剖析 Service Worker 檔案。剖析時 成功時，系統會觸發 Service Worker 的 install 事件。install 事件 只會觸發一次

Service Worker 會在使用者未獲授權的情況下，自動安裝。 即使使用者未安裝 PWAService Worker API 現已開放使用 即使是在不支援 PWA 安裝的平台上 (例如 Safari 和 電腦版裝置上的 Firefox。

安裝完畢後，Service Worker 需要先啟用才能安裝 用戶端，包括您的 PWA當 Service Worker 已就緒 activate 事件會觸發。不過根據預設 已啟用的 Service Worker 要到下一個頁面，才能管理註冊該頁面的頁面 您就會開啟該頁面 方法是重新載入頁面或重新開啟 PWA

您可以使用 self 監聽 Service Worker 全域範圍內的事件 物件：

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

更新 Service Worker

瀏覽器偵測到 Service Worker 時，Service Worker 便會更新 透過 Google Cloud 控制台 與位元組不同

安裝成功後，新的 Service Worker 會等到 舊的 Service Worker 不再管控任何用戶端。這個狀態稱為 「等待」訊息，而瀏覽器也能確保 Service Worker 正在同時運作。

重新整理網頁或重新開啟 PWA 不會讓新的 Service Worker 進行 控管功能使用者必須使用以下指令，關閉或離開所有分頁和視窗： 目前的 Service Worker，再返回，給予新的 Service Worker 控管功能詳情請參閱「Service Worker 生命週期」。

Service Worker 生命週期

已安裝和已註冊的 Service Worker 可以管理所有網路要求 都屬於允許或拒絕的範疇是按照自己的執行緒執行，且會啟動和終止 分別由瀏覽器控制，方便您在 PWA 開啟前運作； 並在關閉後立即使用Service Worker 會在自己的執行緒上執行，但記憶體內狀態 無法在 Service Worker 執行後保留，因此 您可選擇在 IndexedDB 或 永久儲存空間

如果服務工作站尚未執行，則每當有網路要求時，服務工作處理程序就會啟動 在復原範圍內或收到定期觸發事件時 背景同步處理或推送訊息

如果 Service Worker 閒置幾秒鐘，或 你閒置太久了時間長短因瀏覽器而異。如果 Service Worker 已終止，並發生會啟動該工作的事件。 就會重新啟動

功能

已註冊且使用中的 Service Worker 使用的執行緒，是完全不同的 的執行生命週期。不過根據預設 Service Worker 檔案本身沒有行為。不會快取或提供任何 資源；這些就是程式碼需要做的本課程將說明 後續章節。

Service Worker 的功能不只是用於 Proxy 或處理 HTTP 要求。 其他功能內建其他功能，例如背景 執行程式碼、網頁推播通知及處理付款稍後我們會介紹 功能新增的額外內容。

資源