更改 index.html 时强制更新已安装的 PWA（防止缓存）

Question

我正在构建一个 React 应用程序，它包含在 Amazon S3 上托管的单页应用程序中。

有时，我同时向后端和前端部署更改，我需要所有浏览器会话开始运行新版本，或者至少那些会话在上次前端部署之后开始的会话.

发生的情况是，我的许多用户仍然在他们的手机上运行旧的前端版本数周，这与后端的新版本不再兼容，但他们中的一些人在他们开始时获得了更新下届会议。

当我使用 Webpack 构建应用程序时，它会生成名称中带有哈希值index.html的包，而定义应该使用的包的文件使用以下缓存控制属性上传："no-cache, no-store, must-revalidate". Service Worker 文件具有相同的缓存策略。

这个想法是用户的浏览器可以缓存所有内容，执行他们需要的第一个文件。该计划很好，但我正在用index.html更新版本替换该文件，并且我的用户在重新启动应用程序时不会重新获取此文件。

是否有明确的指南或解决该问题的方法？

我也知道 PWA 应该离线工作，所以它必须具有缓存以重用的能力，但这个想法并不能帮助我执行大规模和即时更新，对吧？

我必须这样做的最佳选择是什么？

Answer 1

你的基本想法是正确的。为什么你的 index.html 没有更新是一个很难回答的问题，因为你没有提供任何代码——请包括你的 Service Worker 代码。请记住，根据 Service Worker 中实现的逻辑，它不一定遵循 HTTP 缓存标头，而是会缓存包括 index.html 文件在内的所有内容，就像现在正在发生的那样。

为了让应用程序也在离线模式下工作，您可能需要使用网络优先的软件策略。使用网络优先，浏览器会尝试从网络加载文件，但如果不成功，它会回退到它试图获取的特定文件的最新缓存版本。另一种选择是选择所谓的stale-while-revalidate策略。这首先为用户提供旧文件（速度超快），然后在后台更新文件。还有其他策略，我建议您通读使用最广泛的软件库 Workbox 的文档（https://developers.google.com/web/tools/workbox/modules/workbox-strategies）。

要记住的一件事：在除“跳过软件并转到网络”之外的所有其他策略中，您无法真正确保用户获得最新版本的 index.html。这不可能。如果软件从缓存中返回某些内容，则它可能是旧版本，仅此而已。在这些情况下，通常所做的是通知用户新版本的应用程序已在后台下载。基本上用户会加载应用程序，查看缓存中可用的版本，然后软件会检查更新。如果发现更新（有一个新的 index.html，因此有新的 service-worker.js），用户会看到一个通知，告知应该刷新页面。如果需要，您还可以触发 SW 从您自己的 JS 代码手动检查来自服务器的更新。在那种情况下，

这对你有帮助吗？