Sukka's Blog

童话只美在真实却从不续写

  1. 1. Workbox 概述
  2. 2. 用法
  3. 3. Workbox 实践
    1. 3.1. 图片静态文件
    2. 3.2. 公共 CDN 库
    3. 3.3. 站点访问统计
    4. 3.4. Disqus API 反代
    5. 3.5. Disqus
    6. 3.6. 后缀匹配
    7. 3.7. 默认行为
  4. 4. sw-toolbox 和 Workbox 对比
  5. 5. 参考资料

已经 2018 年了,Service Worker 已经不再是一项新奇的黑科技了。Google Chrome 团队推出了 Workbox,计划取代 sw-toolbox 和 sw-precache 实现 Service Worker 动态缓存,用于构建新一代 PWA。

sw-toolbox 和 sw-precache 并不完善、API 的使用也颇为不便,Google Chrome 团队在 2017 年的时候便停止了对 sw-toolbox 和 sw-precache 的更实现动态缓存,使用已经停止维护的 sw-toolbox 也许不是什么好主意吧。

Workbox 概述

如果之前使用过 sw-toolbox,你会觉得 Workbox 的用法和设计意图和要被它取代的东西非常相似,很多实现也都是一脉相承的。简单来讲,Workbox 要实现的也是:

  • 在构建 PWA 时使其支持离线使用
  • 改造任何一个现有的站点使其支持离线访问
  • 高效使用 Cache API 让站点的速度更快
  • 多种比 Browser Cache 更可控的缓存策略
  • 对 Service Worker 的 API 的支持和扩展

Workbox 操作 Cache Storage 的 API 和 sw-toolbox 的一脉相承,不过新增了一个更灵活和强大的 Cache API staleWhileRevalidate,具体请看 Workbox Strategies | Workbox | Google Developers

用法

首先自然先在站点中注册 Service Worker:

<script>
// Google 官方给出的加载方式
// 你也可以用 if (navigator.serviceWorker)
if ('serviceWorker' in navigator) {
// 为了保证首屏渲染性能,在页面 onload 完之后注册 Service Worker
// 不使用 window.onload 以避免冲突
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
};
}
</script>

从 Workbox 3.0 开始,Google 将 Workbox 核心组件和插件都放在 Google CDN 上维护。不过 Google Global Cache 在国内的可访问性大家也心知肚明,好在 Workbox 也提供了 Self Hosted 的相关 API。
如果单纯想要把所有 Workbox 的核心和插件都放在本地的话,推荐安装 workbox-cli

$ npm i workbox-cli -g
# Or in Yarn
$ yarn global add workbox-cli
# After installation, run copyLibraries to get a copy of workbox libs
$ workbox copyLibraries {path/to/workbox/}

然后就是在 sw.js 里引入 Workbox:

// load from google cdn
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

/* Or */

// load from local path
importScripts('{path/to}/workbox/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '{path/to}/workbox/'
});

Workbox 实践

通常对于大部分项目使用 Workbox 时一般会引入相应的 gulp 或者 webpack 插件,在构建流程中完成对 Service Worker 的注册、将指定 URL 进行 Precache、完成 sw.js 的生成,等等。但是对于 Hexo、Jekyll 等等静态站点生成器或者 WordPress 这种 CMS,如果不安装相应的插件,就需要自己从头编写一个 sw.js

接下来,我来介绍我的博客在 Workbox 的实践。来简单窥视 Workbox 在动态缓存的应用。

// 定义缓存版本号和默认 Cache Storage 条目数
let cacheSuffixVersion = '-181111';
const maxEntries = 100;

图片静态文件

我的博客里几乎所有的图片都在 ae01.alicdn.com 域名下面,每张图片有其唯一的 URL 且几乎不更新,所以可以使用 cacheFirst 持久化缓存。

注意,Workbox 和 sw-toolbox 一个很大的不同就是 Workbox 的 cacheFirst 不主动缓存跨域请求、防止错误的请求被缓存。不过 Workbox 提供了一个 cacheableResponse.Plugin override 实现强制缓存的方法。而 Workbox 的 staleWhileRevalidatenetworkFirst 不会有跨域限制,因为这两类 handler 优先使用网络、可能修复错误的请求。

workbox.routing.registerRoute(
// 使用正则表达式匹配路由
new RegExp('^https://ae01\.alicdn\.com'),
workbox.strategies.cacheFirst({
// cache storage 名称和版本号
cacheName: 'img-cache' + cacheSuffixVersion,
plugins: [
// 使用 expiration 插件实现缓存条目数目和时间控制
new workbox.expiration.Plugin({
// 最大保存项目
maxEntries,
// 缓存 30 天
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
]
})
);

公共 CDN 库

前端开源项目公共 CDN 的文件,如果指定了库的版本,也几乎是永久不会发生改变的,一样可以使用 cacheFirst 做持久化缓存。

workbox.routing.registerRoute(
new RegExp('^https://cdn\.jsdelivr\.net'),
workbox.strategies.cacheFirst({
cacheName: 'static-lib' + cacheSuffixVersion,
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
]
})
);

站点访问统计

虽然 Workbox 有针对离线访问的 Google Analytics 统计插件,可以统计用户的离线访问、并在用户联网后异步回传数据;但是由于我的博客使用的是非官方的 GA 实现,所以只能直接对相关请求做 networkOnly 、放弃对离线访问的统计。如果想要实现 GA 离线统计的可以查看 Workbox 关于 Enable Offline Google Analytics 文档

workbox.routing.registerRoute(
new RegExp('^https://ga\.skk\.moe'),
workbox.strategies.networkOnly()
);

Disqus API 反代

我开发了 DisqusJS 作为「评论基础模式」,当然自己也要使用了。DisqusJS 依赖一个 Disqus API 的反代,针对相关请求使用 staleWhileRevalidate,即缓存后优先使用缓存,同时后台异步再发起一次完整网络请求以更新 Cache。针对 Disqus API 使用这个 Cache API 可以相对及时的更新评论数据、同时在用户离线时也能阅读评论。

虽然为了提供更及时的数据应该使用 networkFirst,但是 staleWhileRevalidate 响应更快。

workbox.routing.registerRoute(
new RegExp('https://disqus\.skk\.moe'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'disqus-api-cache' + cacheSuffixVersion,
})
);

Disqus

DisqusJS 判断访客的 Disqus 可用性是通过检查 shortname.disqus.com/favicon.icodisqus.com/favicon.ico,所以显然不能被缓存;另外,Disqus 本身也没有缓存的必要,所以对 *.disqus.com 一律使用 networkOnly;然而 *.disquscdn.com 域名下的静态文件(比如头像、还有一些 Disqus 的 JS)是可以缓存的,所以用 cacheFirst 缓存 10 天:

workbox.routing.registerRoute(
new RegExp('^https://(.*)disqus\.com'),
workbox.strategies.networkOnly()
);
workbox.routing.registerRoute(
new RegExp('^https://(.*)disquscdn\.com'),
workbox.strategies.cacheFirst({
cacheName: 'disqus-cdn-cache' + cacheSuffixVersion,
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 10 * 24 * 60 * 60,
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
]
})
);

后缀匹配

针对其余没有被域名匹配到的静态文件,通过文件后缀进行匹配、使用 staleWhileRevalidate,可以兼顾速度和尽可能及时的更新。

workbox.routing.registerRoute(
// Cache Image File
/.*\.(?:png|jpg|jpeg|svg|gif)/,
workbox.strategies.staleWhileRevalidate({
cacheName: 'img-cache' + cacheSuffixVersion,
})
);

workbox.routing.registerRoute(
// Cache CSS & JS files
/.*\.(css|js)/,
workbox.strategies.staleWhileRevalidate({
cacheName: 'static-assets-cache',
})
);

默认行为

使用 Workbox 的 defaultHandler 匹配剩下的请求(包括页面自身),一律使用 networkFirst,借助 Workbox 的 runtimeCache 起到加速和离线效果:

workbox.routing.setDefaultHandler(
workbox.strategies.networkFirst({
options: [{
// 超过 3s 请求没有响应则 fallback 到 cache
networkTimeoutSeconds: 3,
}]
})
);

如果对以上提到的各种 handler 和各自的含义有疑问的,可以阅读 The Offline Cookbook - responding to requests | Web Fundamentals | Google Developers

经过实践可以发现,Workbox 的动态缓存的思路和行为和 sw-toolbox 是相似的。但是在使用过程中也可以发现 Workbox 显然要严格一些(比如在对跨域请求的处理);相比 sw-toolbox 从 origin 和 path 两部分匹配路由,Workbox 直接用正则表达式匹配完整 URL 的方法也更容易;Workbox 推出的 staleWhileRevalidate 也很好的照顾了经常更新和需要缓存的文件(比如 css)。

sw-toolbox 和 Workbox 对比

sw-toolbox 是一个完整的、包含了完整的 Service Worker 的 API 的库,而 Workbox 使用插件机制、动态载入相关组件;sw-precache 和 sw-toolbox 问世较早,相应的 Gulp、Grunt、Webpack 插件层出不穷,也有很多相关资料;Workbox 暴露了很多插件接口供开发者编写自己的插件;在实践中也可以发现 Workbox 对路由管理的实现比 sw-toolbox 要更好,staleWhileRevalidate 也非常强大;Workbox 吸收了之前包括 sw-precache 和 sw-toolbox 在内的类库,集成了预缓存和动态缓存的实现。

目前,Google Chrome 团队并没有停止对 sw-toolbox 和 sw-precache 的支持,所以现有的使用 sw-toolbox 和 sw-precache 的项目可以维持现状,但是新的项目还是应该使用更新的 Workbox。

参考资料

本文最后更新于 天前,文中所描述的信息可能已发生改变