使用 service worker 和 Workbox 缓存页面

使用 service worker 和 Workbox 缓存页面

技术杂谈小彩虹2021-08-26 3:16:11170A+A-

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的策略是当需要请求资源时,有缓存则使用缓存,但同时异步请求资源并更新缓存,这样用户下次访问,就能看到最新的页面了。这样既能提高速度,又能保证资源更新。此外也有其他策略来满足不同场景

部署之后测试一下
使用前:
Service worker 使用前

使用后:
Service worker 使用后

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们