Service worker 是一个在后台运行的脚本, 主要用于浏览器和服务器之间的网络交互, 从而实现一些新功能. 而 Workbox 则是 Google 基于这项功能开发的一个库, 使一些常用的功能做到了开箱即用. 这两天研究了一番之后用他们给博客加上了缓存功能, 于是写个文记录一番.
首先, 在页面的脚本里注册 serivce worker.
- //scripts.js
- if ('serviceWorker' in navigator) {
- jQuery(document).load(function () {
- navigator.serviceWorker.register('/sw.js')
- })
- }
由于 service worker 存在作用域, 所以需要放在网站的根目录下. 这里我用了 Nginx 的 alias 把
https://seewang.me/sw.js
解析回了 WordPress 的主题文件夹下方便管理.
- #nginx 配置文件
- location = /sw.js {
- alias /path/to/wordpress/wp-content/themes/twentyfifteenone/js/sw.js;
- }
而在 sw.js 中就是 service worker 的脚本内容了. 首先从 CDN 引用 Wordbox, 也可以下载下来从本地加载.
- //sw.js
- importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js')
然后就是缓存逻辑
- //sw.js
- workbox.routing.registerRoute(
- /\/(en|zh)\/.+/,
- workbox.strategies.staleWhileRevalidate({
- cacheName: 'page-cache',
- plugins: [new workbox.expiration.Plugin({
- maxEntries: 200
- })]
- })
- )
- workbox.routing.registerRoute
函数里第一个参数为匹配资源的正则表达式, 这里我匹配了除了主页以外的所有页面. 而第二个参数则是缓存策略, 这里的
staleWhileRevalidate
的策略是当需要请求资源时, 有缓存则使用缓存, 但同时异步请求资源并更新缓存, 这样用户下次访问, 就能看到最新的页面了. 这样既能提高速度, 又能保证资源更新. 此外也有其他策略 https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies 来满足不同场景
部署之后测试一下
使用前:
使用后:
来源: https://juejin.im/entry/5b7a60faf265da435f33d2c2