阅读 415

移除已经开始上线使用的 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 缓存了。这个时候我们第一步算是成功了。

  1. 在 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 文件。

文章分类
前端
文章标签