在建構可靠的網頁應用程式中，下列兩個 API 扮演了關鍵角色： Service Worker 和快取儲存空間。但 有效運用這些漏洞，但不會導入細微錯誤或撞擊邊緣 對吧？舉例來說，如果 Service Worker 程式碼中的錯誤 會導致快取問題使用者看到的內容可能過時或毀損 連結。
Workbox 是頂層 以 Service Worker 和 Cache Storage 為基礎建構的 Service Worker 工具包 相互整合這項服務提供一組可用於實際工作環境的程式庫，可用來新增離線支援 網頁應用程式。這個工具包分為兩部分：輔助管理工具 程式碼和工具 建構程序
執行階段程式碼
這是在 Service Worker 指令碼中執行的程式碼，負責控制 這個容器會攔截傳出的要求，並與 Cache Storage API 互動。 Workbox 提供 多個程式庫模組 都能處理各種特殊用途最重要的模組 判斷 Service Worker 是否會回應「」(稱為 routing)、 以及回應的方式 (也就是 「快取策略」)。
建構整合
Workbox 優惠 指令列 Node.js 模組 和 Webpack 外掛程式 這些工具可提供替代方法，完成以下兩件事：
- 根據一組設定建立 Service Worker 指令碼 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可產生的 Service Worker 會使用 Workbox 的執行階段程式庫 「幕後」執行您設定的快取策略
- 產生一份應符合規則的網址清單 「友善快取」、 根據可設定的模式，納入及排除產生的檔案 測試期間的流程。
為什麼要使用 Workbox？
建構 Service Worker 時，您可以選擇是否使用 Workbox，共有一個數字 建立一系列 常見的快取策略 來自「香草」Service Worker 的視角。如果您決定使用 Workbox 以下列舉幾項優點
快取管理
Workbox 會為您處理快取更新，無論是在 使用預先快取，或藉由可調整的大小/年齡政策，限制您在使用執行階段期間 快取功能。基礎 Cache Storage API 非常強大，但沒有任何 內建快取效期支援而 Workbox 等工具可以填補這個缺口。
大量記錄和錯誤回報
開始採用服務工作人員時，請先找出「原因」
快取內容 (或者同樣令人困擾，無法快取) 是一項挑戰。
Workbox 可自動偵測應用程式的開發版本
網站，localhost，並在瀏覽器的 JavaScript 中開啟偵錯記錄功能
控制台。
跟著記錄訊息，您就可以掌握任何 設定或撤銷問題的速度會更快
經過測試的跨瀏覽器程式碼集
Workbox 是針對跨瀏覽器測試套件開發而成 會自動改回採用 。
-
workbox-broadcast-cache-update module敬上 採用 廣播頻道 API 但會改回使用postMessage()型 才能導入 - workbox-background-sync 模組 採用 背景同步處理 API 可能的話，且如果不可能，則在每次要求存取時，返回重試排入佇列的事件 Service Worker 會啟動。
如何使用 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 並開始用此 API 進行執行階段快取使用 這表示您將無法使用預先快取 需要建構階段整合)，不過非常適合用於原型設計和試用 即時執行多種快取策略
// 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',
})
);