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