在构建可靠的 Web 应用时，两个 API 起着至关重要的作用：Service Worker 和 Cache Storage。但有效使用它们并非易事，既不会引入细微的 bug，也不会遇到极端情况。例如，Service Worker 代码中的错误可能会导致缓存问题；系统可能会向用户显示过时的内容或损坏的链接。
Workbox 是一种基于 Service Worker 和 Cache Storage API 构建的高级 Service Worker 工具包。它提供了一组可直接用于生产环境的库，用于向 Web 应用添加离线支持。该工具包分为两个集合：帮助管理在 Service Worker 内运行的代码的工具，以及与构建流程集成的工具。
运行时代码
此代码在 Service Worker 脚本内运行，控制其如何拦截传出请求并与 Cache Storage API 交互。Workbox 共十几个库模块，每个模块处理各种专业用例。最重要的模块确定 Service Worker 是否响应（称为路由）及其响应方式（称为缓存策略）。
构建集成
Workbox 提供了命令行、Node.js 模块和 Webpack 插件工具，可提供完成以下两项任务的替代方法：
- 根据一组配置选项创建 Service Worker 脚本。生成的 Service Worker“在后台”使用 Workbox 的运行时库来实施您配置的缓存策略。
- 根据可配置的格式生成一个应“预缓存”的网址列表，以包含和排除在构建流程中生成的文件。
为什么应使用 Workbox？
使用 Workbox 构建 Service Worker 是可选操作，有许多指南从“原版”Service Worker 的角度了解常见的缓存策略。如果您决定使用 Workbox，请参阅它的一些优势。
缓存管理
Workbox 会为您处理缓存更新，这些更新要么在使用预缓存时绑定到构建流程，要么在使用运行时缓存时通过可配置的大小/存在时间政策进行处理。底层 Cache Storage API 功能强大，但不对缓存到期时间提供任何内置支持。Workbox 等工具填补了这一空白。
全面的日志记录和错误报告
当您开始使用 Service Worker 时，要弄清楚为什么某些内容会被缓存（或者，同样令人沮丧的，就是为什么不缓存）是一项挑战。当您在 localhost 上运行网站的开发版本时，Workbox 会自动检测，并在浏览器的 JavaScript 控制台中启用调试日志记录。
通过跟踪日志消息，您可以比单独使用时更快找出任何配置或失效问题的根源。
经过测试的跨浏览器代码库
Workbox 是基于跨浏览器测试套件开发的，它会尽可能自动回退到某些浏览器所缺少功能的替代实现方式。
workbox-broadcast-cache-update module会使用 Broadcast Channel API（如果有），并在不支持的浏览器上回退到基于postMessage()的实现。- 如果可能，workbox-background-sync 模块会使用 Background Sync API；如果没有，则会在每次 Service Worker 启动时回退到重试排队的事件。
如何使用 Workbox？
框架集成
如果您要从头开始启动新项目，可以利用许多热门入门套件和插件插件中的 Workbox 集成：
将 Workbox 添加到现有构建流程
如果您的网站已有构建流程，则在开始使用 Workbox 时，可能需要放入相应的命令行、Node.js 模块或 Webpack 插件工具。
特别是，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',
})
);