关于一些 service worker 的使用总结#

前言

service worker：是运行于浏览器后台，非阻塞的 js 脚本，只要用于缓存资源、拦截网络请求和处理推送通知，其本质上是一个基于浏览器和服务器之间的代理，如下图

TIP

• Service Worker 仅在 HTTPS 上运行，但 localhost 服务器除外
• Service Worker 无法在浏览器无痕模式运行

service worker 生命周期：主要是注册、安装和激活等

1. 注册—网页注册 service-worker 脚本

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js", { scope: "/" }); // sw脚本地址，option可选(scope表示定义sw注册范围)
}

2. 安装 install—可以缓存一些静态资源等

self.addEventListener("install", (event) => {
  console.log("installing…");

  // do something
  // event.waitUntil(
  //   caches.open('caches-version').then(cache => cache.addAll(['/', '/index.html']))
  // )
});

3. 激活 activate—可以进行缓存清理工作，删除不必的旧缓存

const expectedCaches = ["/cat.png"];
self.addEventListener("activate", (event) => {
  console.log("activate...");

  // do something
  // event.waitUntil(
  //   caches.keys().then(keys => Promise.all(
  //     keys.map(key => {
  //       if (!expectedCaches.includes(key)) {
  //          return caches.delete(key)
  //       }
  //     })
  //   ))
  // )
});

详细介绍：

1. https://developer.chrome.com/docs/workbox/service-worker-overview?hl=zh-cn
2. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
3. https://web.dev/learn/pwa/service-workers?hl=zh-cn

使用

• gatsby 中使用（例子：青椒云官网首页）

  1. yarn i gatsby-plugin-offline

  2. 在 gatsby-config.ts 文件中的 plugin 下添加 gatsby-plugin-offline，重新启动项目
  3. 验证
     1. 浏览器控制台 network 设为 offline，刷新后查看网站是否加载，若能加载则插件已使用，sw 已生效
     2. 浏览器控制台 application 查看 sw 是否已注册且状态为 activated，若出现则成功，如下图
     3. chrome 浏览器访问 chrome://serviceworker-internals/，查看网站地址是否注册 sw，如下图
• nextjs14 中使用
  1. 推荐使用库@serwist/next，不推荐使用next-pwa（注册 sw 有时会失败）
  2. 自定义实现可以参考service-worker.js