Workbox:您的高階 Service Worker 工具包

在建構可靠的網路應用程式時,有兩個 API 扮演著重要角色:Service Worker快取儲存空間。不過,要有效使用這些功能,不引入細微的錯誤或碰到邊緣情況,可能會是一大挑戰。舉例來說,服務工作站程式碼中的錯誤可能會導致快取問題,使用者可能會看到過時的內容或無效連結。

Workbox 是一種高階服務工作者工具包,以 Service Worker 和 Cache Storage API 為基礎。提供可供實際使用的程式庫組合,可為網頁應用程式新增離線支援功能。工具包的結構分為兩個集合:可協助管理服務工作程內執行的程式碼,以及可與建構程序整合的工具。

這是在服務工作者指令碼中執行的程式碼,用於控制服務工作者如何攔截傳出要求,以及與 Cache Storage API 互動。Workbox 總共有十幾個程式庫模組,每個模組都會處理各種專門用途。最重要的模組會決定服務工作者是否會回應 (稱為「路由」),以及如何回應 (稱為「快取策略」)。

Workbox 提供指令列Node.js 模組Webpack 外掛程式工具,可提供其他方式來達成以下兩項:

  • 根據一組設定選項建立服務工作者指令碼。產生的服務工作者會使用 Workbox 的「底層」執行階段程式庫,執行您設定的快取策略。
  • 根據可設定的模式,產生應「預先快取」的網址清單,以便在建構程序中納入及排除產生的檔案。

為什麼要使用 Workbox?

您可以選擇在建構服務工作者時使用 Workbox。目前有許多指南會從「一般」服務工作者的角度,介紹常見的快取策略。如果您決定使用 Workbox,以下是它的部分優點。

快取管理

Workbox 會為您處理快取更新作業,無論是使用預先快取功能時與建構程序連結,或是使用執行階段快取功能時透過可設定的大小/年齡政策,皆可達到這項目的。基礎快取儲存空間 API 功能強大,但沒有任何內建的快取到期日支援。Workbox 等工具可彌補這項缺口。

提供詳細的記錄和錯誤回報

開始使用 Service Worker 時,要找出「為何」某些內容會被快取 (或同樣令人困惑的「為何」不會被快取) 是一項挑戰。Workbox 會自動偵測您在 localhost 上執行網站的開發人員版本,並在瀏覽器的 JavaScript 控制台中啟用偵錯記錄。

將 Workbox 記錄記錄到開發人員工具控制台

只要跟著記錄訊息,您就能更快找出任何設定或無效問題的根本原因,比單獨處理時更有效率。

經過測試的跨瀏覽器程式碼集

Workbox 是針對跨瀏覽器測試套件開發,並在可行時,自動改用特定瀏覽器缺少的功能替代實作。

如何使用 Workbox?

架構整合

如果您是從頭開始進行新專案,可以利用許多熱門的入門套件和外掛程式提供的 Workbox 整合功能:

將 Workbox 新增至現有建構程序

如果您已為網站建立建構程序,只要放入適當的指令列Node.js 模組webpack 外掛程式工具,即可開始使用 Workbox。

特別是,Workbox 指令列介面可讓您輕鬆啟動及執行,其中的 wizard 模式會檢查您的本機開發環境,並建議您可在日後使用的合理預設設定:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

如要建構服務工作者,請在建構程序中執行 workbox generateSW workbox-config.js。詳情請參閱 generateSW 說明文件。您可以變更 workbox-config.js,進一步自訂服務工作站。詳情請參閱選項說明文件

在現有服務工作站的執行階段中使用 Workbox

如果您已有服務工作者,且想試用 Workbox 的執行階段程式庫,請從 Workbox 的官方 CDN 匯入 Workbox,並立即開始使用它進行執行階段快取。這個用途表示您無法利用預先快取功能 (需要在建構期間整合),但非常適合用於製作原型,並即時嘗試不同的快取策略。

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);