Workbox:您的高阶 Service Worker 工具包

下面两个 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?

框架集成

如果你打算从头开始一个新项目,可以利用 许多热门入门套件和插件插件中都集成了 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',
  })
);