javascript - 在 create-react-app 项目中注销 service worker 的后果是什么？

Question

我有一个 create-react-app 项目，当有新的产品发布时，我遇到了一个问题，除非清除缓存或在刷新页面后的最佳情况下，否则用户无法获得最新版本他们访问它。我的 Cloudflare 缓存过期时间设置为 4 小时，但显然用户在这段时间后仍然得到旧版本。这让我认为这是服务 worker 的问题。是否还有其他原因导致这种行为？有哪些可能的解决方案？注销软件是否被认为是解决此问题的好方法？知道我现在不需要我的应用程序离线运行。如果这是一个很好的解决方案，注销它的后果是什么？我是否需要在 index.html 中使用缓存控制 header (即 max-age=0)？

我知道这是很多问题，但我想展示我正在思考的方向以及我有点困惑的领域。

提前感谢您抽出宝贵时间提供帮助。

Answer 1

将版本控制添加到 Service Worker 缓存是确保在有新构建时安装新 Service Worker 的方法之一。只需添加一个脚本，它会在每次新构建时增加缓存的版本，这会导致服务 worker 中的字节差异足以让浏览器触发新的安装事件。

在你的 service worker 文件中添加类似

的内容

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

在您的 Activate 事件中添加逻辑，如果版本不匹配则删除旧缓存。

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);
          }
        })
      );
    })
  );
});

您还可以将更新逻辑添加到您的获取监听器中，它将像从网络中获取最新文件一样

event.waituntil(update(request));