Workbox：高级 Service Worker 工具包

Jeff Posnick

Service Worker 和 Cache Storage 这两个 API 在构建可靠的 Web 应用方面发挥着至关重要的作用。但如何有效使用它们，避免引入细微的 bug 或遇到极端情况，可能是一个挑战。例如，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 的运行时库，以实施您配置的缓存策略。
  • 根据可配置的模式生成应“预缓存”的网址列表，以包含和排除在构建过程中生成的文件。

为什么要使用 Workbox？

在构建 Service Worker 时，您可以选择是否使用 Workbox。有许多指南从“普通”Service Worker 的角度介绍了常见的缓存策略。如果您决定使用 Workbox， 以下是它的一些优势。

缓存管理

Workbox 会为您处理缓存更新，在使用预缓存时与构建流程相关联，或在使用运行时缓存时通过可配置的大小/时效政策进行处理。底层 Cache Storage API 功能强大，但不支持缓存过期。Workbox 等工具可以填补这一空白。

全面的日志记录和错误报告

刚开始使用 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',
  })
);