移除已经开始上线使用的 Service Worker

如何移除已经开始上线使用的 Service Worker

接手了一个历史项目，PC 端使用了 Service Worker 缓存，后文将 Service Worker 简称为 SW，现在想废弃使用该项缓存功能，

啥是 SW

简单来说，就是扮演浏览器跟服务器的中间人，能够拦截所有请求和资源，进行缓存，缓存策略可自定义。

简单说下使用 SW 流程

1. 在入口文件注册 SW
2. 在根目录新建 SW.js 文件
3. 在 SW.js 文件定义缓存策略

移除 SW 不当的后果

说道移除 SW，第一反应可能是删掉 SW.js。注意，直接这么做会导致你的网站永远无法更新，即便服务器上文件有更新。
原因是因为 SW 已经缓存了所有的资源，而浏览器更新资源依靠 SW.js 里面的缓存策略。直接删除 SW.js 文件相当于删除了管理缓存的中间人，那么浏览器只会一直从已有的缓存中拿取资源

正确移除 SW 的步骤

1. 在 SW.js 里添加如下代码，删掉其余的缓存策略

caches.keys()
  .then(keys =>
    Promise.all(
      keys.map(async key => console.log("caches.delete", key, await caches.delete(key)))))
  .then(async () => {
    console.log("registration.unregister", await registration.unregister());
  })
  .then(() => console.log("DONE"))
  .catch(console.error);
复制代码

这几行代码的目的是为了清空 SW 的缓存并解除注册，然后发版，在代码更新后，可以通过 network 观察到此时页面资源不再通过 SW 缓存，而是走回 http 缓存了。这个时候我们第一步算是成功了。

2. 在 24 小时后，在入口文件添加如下代码，主动注销 SW 和删掉相关 SW 配置

const serviceWorker = navigator.serviceWorker;

serviceWorker.getRegistrations ? serviceWorker.getRegistrations().then(function(sws) {
  sws.forEach(function(sw) {
    sw.unregister();
    console.log('sw unregister 1');
  });
}) : serviceWorker.getRegistration && serviceWorker.getRegistration().then(function(sw) {
  sw && sw.unregister();
  console.log('sw unregister 2');
});
复制代码

这段代码的目的是注销 SW，如果你的项目使用了 webpack 配置 SW，此时也可以去掉相关配置，删除 SW.js 文件。