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

Question

我正在构建一个react应用程序，它是一个单页应用程序，托管在Amazon S3上。

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

问题是，我的许多用户仍在他们的手机上运行旧版前端版本长达几周，这与后端的新版本不兼容，但其中一些用户在下一次会话开始时就可以获得更新。

由于我使用Webpack构建应用程序，它会生成包含哈希值的捆绑包，而定义应该使用哪些捆绑包的index.html文件，则上传了以下缓存控制属性："no-cache, no-store, must-revalidate"。服务工作者文件具有相同的缓存策略。

想法是用户的浏览器可以缓存所有内容，除了他们需要的第一个文件。计划很好，但是当我用更新的版本替换index.html文件时，我的用户没有重新获取此文件，当他们重新启动应用程序时。

是否有权威的指南或解决此问题的方法？

我也知道PWA应该可以离线工作，因此必须具有缓存以重复使用的功能，但这个想法对我执行大规模和即时更新也没有帮助，对吧？

我有什么最好的选择来解决这个问题？

- Leonardo Valverde

Answer 1

你的基本理解是正确的。为什么你的index.html没有更新是一个难以回答的问题，因为你没有提供任何代码 - 请包括你的Service Worker代码。请注意，根据Service Worker实现的逻辑，它不一定遵循HTTP缓存头，并且会缓存所有文件，包括index.html文件，似乎现在正在发生这种情况。

为了使应用程序也能在离线模式下工作，你可能想使用一种“网络优先”的SW策略。使用网络优先，浏览器尝试从Web加载文件，但如果失败，则返回它尝试获取的特定文件的最新缓存版本。另一个选择是选择所谓的“陈旧-同步重验证”策略。那首先给用户旧的文件（这非常快），然后在后台更新文件。还有其他策略，我建议你阅读最广泛使用的SW库Workbox的文档 (https://developers.google.com/web/tools/workbox/modules/workbox-strategies)。

请注意： 除了“跳过SW并转到网络”策略之外的所有其他策略都无法确保用户获取最新版本的index.html。这是不可能的。如果SW从缓存中返回了某些内容，则可能是旧版本，就是这样。在这些情况下，通常会向用户发出通知，告知后台已下载了新版本的应用程序。基本上，用户将加载应用程序，查看可用于缓存的版本，然后SW将检查更新。如果找到更新（有新的index.html，并因此有新的service-worker.js），则用户将看到一个通知，告知页面应该刷新。如果您愿意，还可以从自己的JS代码手动触发SW以检查服务器上的更新。在那种情况下，您也会向用户显示通知。

这能帮助你吗？

- pate

---

我没有提供服务工作者代码，因为那里没有缓存逻辑。我决定将这些元标记（作为防止缓存的尝试）添加到html页面的头部，如下所示。我会看看是否有效，但您提供的链接可能很有用，而且解释使事情更清晰。非常感谢。 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> - Leonardo Valverde

那么有帮助吗？ - Hiti3