javascript - 我应该如何更新 Service Worker 和缓存的 PWA 文件

Question

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

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

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

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

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

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

我似乎找不到关于如何处理这些问题的良好指南，感觉浏览器应该根据某些选项(例如每 X 时间重试)为我做很多工作。是否有一些我不知道的神奇 HTTP header ？

Answer 1

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

我用了This文章并创建我的新服务工作人员(而不是 create-react-app 中的默认服务工作人员)。本文还解释了如何检测新的 Service Worker 安装，以便您可以通知用户有新的更新可用并刷新 PWA。

希望这可以帮助你。