更改 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 代码手动检查来自服务器的更新。 在这种情况下，您也会向用户显示通知。

这对你有帮助吗？