此页面由 Cloud Translation API 翻译。

Workbox：您的高阶 Service Worker 工具包

Jeff Posnick

下面两个 API 在构建可靠的 Web 应用时起着至关重要的作用： Service Worker 和缓存存储。但是有效利用，而不会引入细微的 bug 或碰到边缘可能是一个挑战。例如，Service Worker 代码中的错误会导致缓存问题；向用户显示的内容可能已过时或已损坏链接。

Workbox 是基于 Service Worker 和 Cache Storage 构建的 Service Worker 工具包 API。它提供了一组可用于生产环境的库，用于向 Web 应用。该工具包分为两个集合：在 Service Worker 中运行的代码，以及与 Google Cloud 集成的构建流程

运行时代码

这是在 Service Worker 脚本内部运行的代码，用于控制它会拦截传出请求并与 Cache Storage API 交互。 Workbox 有共十几个库模块，每个容器可处理各种特定的用例。最重要的模块确定 Service Worker 是否作出响应（称为 routing)、以及响应方式（称为缓存策略）。

build 集成

Workbox 优惠命令行、 Node.js 模块和 webpack 插件工具提供完成两件事的备选方式：

根据一组配置创建 Service Worker 脚本选项。生成的 Service Worker 使用 Workbox 的运行时库 “后台”以实际运用您配置的缓存策略。
生成应 “precached” 根据可配置的模式来包含和排除生成的文件构建过程中会遇到的一些问题

为什么应该使用 Workbox？

在构建 Service Worker 时使用 Workbox 是可选操作 - 有一个数字其中介绍了一些指南常见的缓存策略来自“vanilla”Service Worker 的机制。如果您决定使用 Workbox 下面介绍了它的一些优点

缓存管理

Workbox 可为您处理缓存更新，要么与构建流程相关联，使用预缓存，或通过可配置的大小/年龄政策（使用运行时）缓存。底层 Cache Storage API 功能强大，但它没有任何对缓存到期时间的内置支持。Workbox 等工具可以填补这一空白。

详尽的日志记录和错误报告

当您开始使用 Service Worker 时，找出某些问题的原因正在缓存数据（或者同样令人失望的是为何未缓存数据），这都是一个挑战。 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 的运行时库从 Workbox 的官方 CDN 导入并立即开始将其用于运行时缓存。此用途那么您将无法利用需要构建时集成），但很适合原型设计和试用即时缓存的不同缓存策略

// 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',
  })
);