Service Worker

使用者會希望應用程式在網路連線速度緩慢、不穩定,甚至離線時啟動。使用者會期待最近互動的內容 (例如媒體曲目、票券及行程) 並可供使用。當無法執行要求時,他們會希望應用程式通知他們,而不會發生無聲的失敗或當機情形。使用者希望能快速完成一切。如同我們在這項研究中看到的《毫秒可創造數百萬人》,即使載入時間縮短 0.1 秒,轉換率最多可提升 10%。總結:使用者希望 PWA 穩定可靠,這也是我們選擇服務工作處理程序的原因。

向 Service Worker 問好

可做為中介軟體 Proxy,在 PWA 和伺服器 (包括自有伺服器和跨網域伺服器) 之間在裝置端運作的 Service Worker。

當應用程式要求 Service Worker 範圍所涵蓋的資源 (包括使用者離線時),Service Worker 會攔截該要求並做為網路 Proxy。然後判斷是否應透過 Cache Storage API 從快取提供資源、依照平常沒有 Service Worker 的情況從網路提供資源,或是從本機演算法建立資源。如此一來,就能提供與平台應用程式類似的體驗,甚至可以完全離線運作。

註冊 Service Worker

服務工作處理程序必須先為您的 PWA 註冊網頁,才能獲得您網頁的控制權。這表示使用者首次造訪 PWA 時,網路要求會直接傳送至您的伺服器,因為服務工作處理程序還無法控制您的網頁。

檢查瀏覽器是否支援 Service Worker API 後,PWA 就能註冊 Service Worker。載入後,服務工作處理程序會在 PWA 和網路之間設定購物功能,藉此攔截要求並提供對應的回應。

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

確認 Service Worker 是否已註冊

如要確認服務工作處理程序是否已註冊,請在您慣用的瀏覽器中使用開發人員工具。

使用 Firefox 和以 Chromium 為基礎的瀏覽器 (Microsoft Edge、Google Chrome 或 Samsung Internet):

  1. 開啟開發人員工具,然後按一下「Application」分頁標籤。
  2. 選取左側窗格中的「Service Workers」
  3. 檢查服務工作處理程序的指令碼網址是否顯示「已啟用」狀態。請參閱本章節,瞭解這個狀態代表的意義。Firefox 的狀態可能是「執行中」或「已停止」。

在 Safari 中:

  1. 依序點選「Develop」(開發) 選單和「Service Workers」(服務工作站) 子選單。
  2. 檢查子選單中是否顯示了目前來源的項目。這會開啟檢查器,查看 Service Worker 的結構定義。
Chrome、Firefox 和 Safari 上的 Service Worker 開發人員工具。
Chrome、Firefox 和 Safari 上的 Service Worker 開發人員工具。

範圍

服務工作處理程序所在的資料夾會決定其範圍。位於 example.com/my-pwa/sw.js 的 Service Worker 可控制位於 my-pwa 路徑或以下位置的任何導覽,例如 example.com/my-pwa/demos/。服務工作處理程序只能控制自身範圍內的項目 (網頁、工作站、統稱「用戶端」)。範圍適用於瀏覽器分頁和 PWA 視窗,

每個範圍只允許一個 Service Worker。當啟用和執行中時,無論記憶體中的用戶端數量 (例如 PWA 視窗或瀏覽器分頁) 中,通常只有一個執行個體。

Safari 有更複雜的範圍管理功能 (又稱「分區」),在擁有跨網域 iframe 時會影響範圍的運作方式。如要進一步瞭解 WebKit 的實作方式,請參閱他們的網誌文章

生命週期

服務工作站的生命週期會指出其安裝方式,這與 PWA 安裝方式不同。 服務工作站生命週期的從註冊 Service Worker 開始。接著,瀏覽器會嘗試下載並剖析 Service Worker 檔案。如果剖析成功,就會觸發 install 事件。install 事件只會觸發一次。

Service Worker 會在沒有使用者授權的情況下安裝,即使使用者沒有安裝 PWA。Service Worker API 甚至適用於不支援 PWA 安裝功能的平台,例如電腦裝置上的 Safari 和 Firefox。

安裝後,服務工作處理程序尚未掌控其用戶端 (包括 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 不再控制任何用戶端為止。這個狀態稱為「等待中」,瀏覽器可以確保一次只會執行一個版本的 Service Worker。重新整理頁面或重新開啟 PWA 並無法控制新的 Service Worker。使用者必須使用目前的 Service Worker 關閉或離開所有分頁和視窗,然後再返回。如此一來,新的 Service Worker 就會接手控管。 詳情請參閱這篇服務工作站生命週期文章

Service Worker 壽命

安裝並註冊完成後,服務工作處理程序就能管理範圍內的所有網路要求。它會在其本身的執行緒上執行,且由瀏覽器控制啟用和終止。如此一來,即使在 PWA 開啟前後,這項功能也能正常運作。雖然 Service Worker 是在自己的執行緒上執行,但無法保證會在服務工作站執行之間保留記憶體內狀態,因此請務必在每次執行作業之間重複使用任何要重複使用的內容,例如 IndexedDB 或其他永久儲存空間。

如果尚未開始執行,每當系統要求範圍內的網路要求,或收到觸發事件 (例如定期背景同步處理或推送訊息) 時,服務工作處理程序就會啟動。

服務工作人員不會無限期存在。雖然各瀏覽器的確切時間有所不同,但如果服務工作處理程序已閒置幾秒鐘,或工作時間過長,系統就會終止服務工作處理程序。如果 Service Worker 已終止,且發生會啟動特定事件的事件,服務會隨即重新啟動。

功能

如果執行緒已註冊,而且正在運作,則您的執行緒執行生命週期會與 PWA 上的主要生命週期不同。不過根據預設,Service Worker 檔案本身沒有任何行為。這項作業必須由程式碼執行,因此不會快取或提供任何資源。請參閱以下章節。

Service Worker 的功能不只能用來處理 Proxy 或處理 HTTP 要求,另外還提供其他功能,例如執行背景程式碼、網路推播通知及處理付款等其他用途。我們會在功能章節討論這些新增項目。

資源