两个 API 在构建可靠的 Web 应用中起着至关重要的作用：Service Worker 和 Cache Storage。但是，有效地使用它们（而不会引入细微的错误或遇到边缘情况）可能是一个挑战。例如，Service Worker 代码中的错误可能会导致缓存问题；用户可能会看到过时的内容或损坏的链接。
Workbox 是一个高级 Service Worker 工具包，构建于 Service Worker 和 Cache Storage API 之上。它提供了一套生产就绪的库，用于为 Web 应用添加离线支持。该工具包分为两个集合：帮助管理在 Service Worker 内部运行的代码的工具，以及与您的构建流程集成的工具。
运行时代码
这是在您的 Service Worker 脚本内部运行的代码，它控制着脚本如何拦截传出的请求以及如何与 Cache Storage API 交互。Workbox 共有 十几个库模块，每个模块都处理各种专门的用例。最重要的模块确定 Service Worker 是否会响应（称为路由），以及如何响应（称为缓存策略）。
构建集成
Workbox 提供了 命令行、Node.js 模块和 webpack 插件工具，这些工具提供了实现以下两件事的替代方法：
- 基于一组配置选项创建 Service Worker 脚本。生成的 Service Worker “在底层”使用 Workbox 的运行时库，以实施您配置的缓存策略。
- 生成应“预缓存”的 URL 列表，该列表基于可配置的模式，以包含和排除在您的构建流程中生成的文件。
为什么要使用 Workbox？
在构建 Service Worker 时，使用 Workbox 是可选的——有很多指南介绍了从“原生” Service Worker 角度出发的常用缓存策略。如果您决定使用 Workbox，以下是它的一些优势。
缓存管理
Workbox 为您处理缓存更新，无论是使用预缓存时与您的构建流程关联，还是在使用运行时缓存时通过可配置的大小/期限策略进行更新。底层的 Cache Storage API 功能强大，但它没有任何内置的缓存过期支持。Workbox 等工具填补了这一空白。
广泛的日志记录和错误报告
当您开始使用 Service Worker 时，弄清楚为什么某些内容被缓存（或者，同样令人沮丧的是，为什么它没有被缓存）是一个挑战。Workbox 会自动检测您何时在 localhost 上运行网站的开发版本，并在浏览器的 JavaScript 控制台中启用调试日志记录。
通过跟踪日志消息，您可以比单独进行调试更快地找到任何配置或失效问题的根源。
经过测试的、跨浏览器的代码库
Workbox 是针对跨浏览器测试套件开发的，并且在可能的情况下，会自动回退到某些浏览器中缺少的功能的替代实现。
workbox-broadcast-cache-update 模块在可用时使用 Broadcast Channel API，并在不支持的浏览器上回退到基于postMessage()的实现。- workbox-background-sync 模块 在可能的情况下使用 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 并立即开始将其用于运行时缓存。此用例意味着您将无法利用预缓存（这需要构建时集成），但它非常适合原型设计和动态试用不同的缓存策略。
// 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',
})
);