我应该怎么做才能更新服务人员和缓存的 PWA 文件

Question

因此，在我当前的系统中，每当我制作一个 javascript 包时，我都会在文件名中添加一个哈希以用于生产构建。我的 index.html 中没有 CDN 缓存，因此每当一个新版本出现时，都会创建一个新的 index.html，指向新的散列 javascript 文件名。每当发生新部署时，这可以很好地使捆绑包的缓存失效（代价是我的非常小的 index.html 没有被缓存）

我正在考虑让我的应用程序作为 PWA 工作，并且想知道在部署新的应用程序版本时如何使现有用户的缓存无效。以下是问题：

1. serviceworker.js 需要有一个固定的文件名（文件名中没有哈希），这意味着我的 CDN 会长时间缓存该文件，我不想在每次部署时手动使 CDN 缓存失效.我想我可以像对 index.html 一样删除 serviceworker.js 上的缓存，因为该文件只下载一次。

2. 我的工作人员在用户的浏览器中注册，我不确定是否需要添加一些额外的代码来检查工作人员的新版本是否可用。浏览器如何决定何时尝试更新已注册的 serviceworker？我可以取消注册我的 Service Worker 以在我的 PWA 中安装新版本吗？这不会破坏 PWA 吗？

3. 我的 index.html 由 service worker 缓存，这意味着使用 PWA 的人永远不会获得我的主要 JS 包的新版本（因为缓存的 index.html 将通过哈希指向旧的包文件名）。我想我可以删除 index.html 上的 serviceworker 缓存，但应用程序将无法离线运行？

4. 如果想离线使用我的应用程序，我需要我的 service worker 能够缓存我的散列 JS 文件。我想我需要对 self.addEventListener('fetch', ...) 中的文件名做一些魔术，以使用缓存版本（如果可用），并在互联网可用时定期检查新版本，获取散列的 JS 包文件名创建未缓存的静态 JSON 文件或具有最新文件名的文件。不过，这似乎是一个骇人听闻的解决方案。

我似乎找不到关于如何处理这些问题的好指南，感觉就像浏览器应该能够根据某些选项（例如每 X 次重试一次）为我做的事情需要做很多工作。是否有一些我不知道的神奇 HTTP 标头？

Answer 1

我有同样的问题，我今天解决了这个问题。您的index.html 应由服务人员缓存以供离线工作。当用户打开你的 PWA 时，所有文件将从缓存中加载，加载完成后，将从网络中检索 service worker，如果有新的 service worker，将下载所有新文件，新的 service worker 将安装并等待激活。您需要刷新 PWA 才能激活新的 Service Worker 并实际使用更新后的应用。

我使用了This 文章并创建了我的新服务工作者（而不是 create-react-app 中的默认服务工作者）。本文还介绍了检测新的 Service Worker 安装，以便您可以通知用户有可用的新更新并刷新 PWA。

希望对你有帮助。