我正在构建一个 React 应用程序，它包含在 Amazon S3 上托管的单页应用程序中。
有时，我同时向后端和前端部署更改，我需要所有浏览器 session 开始运行新版本，或者至少那些 session 在上次前端部署之后开始的 session .
发生的情况是我的许多用户仍然在他们的手机上运行旧的前端版本 数周 ，这不再与后端的新版本兼容，但其中一些在开始下一个 session 时会获得更新。
当我使用 Webpack 构建应用程序时，它会生成名称中带有哈希值的包，而 index.html文件，它定义了应该使用的包，使用以下缓存控制属性上传:"no-cache, no-store, must-revalidate" . Service Worker 文件具有相同的缓存策略。
这个想法是用户的浏览器可以缓存所有内容，执行他们需要的第一个文件。计划很好，但我要更换 index.html具有较新版本的文件，我的用户在重新启动应用程序时不会重新获取此文件。
是否有明确的指南或解决该问题的方法？
我也知道 PWA 应该离线工作，所以它必须具有缓存以重用的能力，但这个想法也不能帮助我执行大规模和即时更新，对吧？
我必须这样做的最佳选择是什么？
最佳答案
你的基本想法是正确的。为什么你的 index.html 没有更新是一个很难回答的问题，因为你没有提供任何代码——请包括你的 Service Worker 代码。请记住，根据 Service Worker 中实现的逻辑，它不一定遵循 HTTP 缓存 header ，而是会缓存包括 index.html 文件在内的所有内容，就像现在正在发生的那样。
为了让应用程序也在离线模式下工作，您可能需要使用网络优先的软件策略。使用网络优先浏览器尝试从网络加载文件，但如果它不成功，它会回退到它试图获取的特定文件的最新缓存版本。另一种选择是选择所谓的 stale-while-revalidate 策略。这首先为用户提供旧文件(速度超快)，然后在后台更新文件。还有其他策略，我建议您通读使用最广泛的 SW 库 Workbox ( https://developers.google.com/web/tools/workbox/modules/workbox-strategies ) 的文档。
要记住的一件事:
在除“跳过 SW 进入网络”之外的所有其他策略中，您无法真正确保用户获得最新版本的 index.html。这不可能。如果软件从缓存中返回某些内容，则它可能是旧版本，仅此而已。在这些情况下，通常所做的是通知用户新版本的应用程序已在后台下载。基本上用户会加载应用程序，查看缓存中可用的版本，然后软件会检查更新。如果发现更新(有一个新的 index.html，因此有新的 service-worker.js)，用户会看到一个通知，告知应该刷新页面。如果需要，您还可以触发 SW 从您自己的 JS 代码手动检查来自服务器的更新。在这种情况下，您也会向用户显示通知。
这对你有帮助吗？
关于reactjs - 更改 index.html 时强制更新已安装的 PWA(防止缓存)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56942145/