Workbox：高階 Service Worker 工具包

Jeff Posnick

建構可靠的網頁應用程式時，有兩個 API 扮演重要角色：Service Worker 和 Cache Storage。不過，如何有效運用這些功能，同時避免產生細微錯誤或遇到極端情況，可能是一大挑戰。舉例來說，Service Worker 程式碼中的錯誤可能會導致快取問題，使用者可能會看到過時的內容或無效連結。

Workbox 是以 Service Worker 和 Cache Storage API 為基礎建構的高階 Service Worker 工具包。這組程式庫可用於正式環境，可為網頁應用程式新增離線支援。這個工具包分為兩個集合：協助管理 Service Worker 內執行的程式碼，以及與建構程序整合的工具。

執行階段程式碼

這段程式碼會在 Service Worker 指令碼中執行，控制指令碼如何攔截傳出要求，以及與 Cache Storage API 互動。Workbox 總共有十幾個程式庫模組，每個模組都能處理各種特殊用途。最重要的模組會決定 Service Worker 是否會回應 (稱為轉送)，以及如何回應 (稱為快取策略)。

建立整合

Workbox 提供指令列、Node.js 模組和 webpack 外掛程式工具，可透過其他方式完成兩件事：

  • 根據一組設定選項建立 Service Worker 指令碼。產生的 Service Worker 會在背景使用 Workbox 的執行階段程式庫，執行您設定的快取策略。
  • 根據可設定的模式，產生應「預先快取」的網址清單，納入及排除建構程序中產生的檔案。

為什麼要使用 Workbox？

建構 Service Worker 時，不一定要使用 Workbox，有許多指南會從「vanilla」Service Worker 的角度，逐步說明常見的快取策略。如果您決定使用 Workbox，以下是這項工具的部分優點。

快取管理

Workbox 會為您處理快取更新，在使用預先快取時與建構程序連結，或在使用執行階段快取時透過可設定的大小/年齡政策。基礎 Cache Storage API 功能強大，但並未內建快取到期支援。Workbox 等工具可以彌補這中間的落差。

詳盡的記錄和 Error Reporting

剛開始使用 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

如要建構 Service Worker，請在建構程序中執行 workbox generateSW workbox-config.js。詳情請參閱 generateSW 說明文件。您可以變更 workbox-config.js，進一步自訂 Service Worker。詳情請參閱選項說明文件。

在現有的 Service Worker 中，於執行階段使用 Workbox

如果您已有 Service Worker，且想試用 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',
  })
);