取消注册create-react-app项目中的服务工作者会带来什么后果?

5
我有一个create-react-app项目,在新的生产版本发布后,用户无法得到最新版本,除非他们清除缓存或在访问后刷新页面才能获取到最新版本。我的Cloudflare缓存过期时间设置为4小时,但是显然在这段时间之后,用户仍然会得到旧版本。这让我想到可能是服务工作者的问题。
还有其他原因导致这种行为吗?有哪些可能的解决方案?如果我不需要我的应用程序离线运行,注销SW是否被认为是一个好的解决方案?如果这是一个好的解决方案,注销它的后果是什么?我需要在我的index.html中使用cache-control头(即max-age=0)吗?
我知道有很多问题,但我想让您了解我的思路和我有点困惑的领域。
谢谢您的时间和帮助。
1个回答

3

为你的服务工作线程缓存添加版本控制是确保每次新构建时安装新服务工作线程的方法之一。只需添加一个脚本,在每个新构建中增加缓存版本号,这会导致服务工作线程字节差异,从而足以触发浏览器的新安装事件。

在你的服务工作线程文件中添加如下内容:

const version = 1;
let cacheV = 'foo' + version;

在您的激活事件中添加一些逻辑,如果存在版本不匹配,则删除旧缓存。
self.addEventListener("activate", function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheV!== cacheName &&  cacheName.startsWith("foo")) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

您可以在fetch listener中添加更新逻辑,从网络上获取最新的文件,例如:
event.waituntil(update(request));

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接