更改 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 文件在内的所有内容，就像现在正在发生的那样。

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

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

这对你有帮助吗？