在 create-react-app 项目中取消注册 Service Worker 会产生什么后果？

Question

我有一个 create-react-app 项目，当有新的生产版本时，我遇到了一个问题，除非清除缓存，或者在访问页面后刷新页面时，否则用户无法获得最新版本。我的 Cloudflare 缓存过期时间设置为 4 小时，但显然用户在此期限后仍然可以获得旧版本。这让我认为这是服务人员的问题。还有其他原因导致这种行为吗？可能的解决方案有哪些？取消注册软件是否是解决此问题的好方法？知道我目前不需要我的应用程序离线运行。如果这是一个好的解决方案，取消注册会有什么后果？我需要在我的index.html 中使用缓存控制标头（即max-age=0）吗？

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

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

Answer 1

向 Service Worker 缓存添加版本控制是确保每当有新构建时都会安装新 Service Worker 的方法之一。只需添加一个脚本，该脚本会在每个新构建中增加缓存的版本，这会导致服务工作线程中出现字节差异，这足以让浏览器触发新的安装事件。

在您的 Service Worker 文件中添加类似的内容

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

您还可以向获取侦听器添加更新逻辑，该侦听器将从网络获取最新文件，例如

event.waituntil(update(request));