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

我正在构建一个react应用程序，它包含在一个单页应用程序中，托管在AmazonS3上

有时，我会同时将更改部署到后端和前端，并且我需要所有浏览器会话来开始运行新版本，或者至少需要那些会话在最后一次前端部署之后启动的浏览器会话

发生的情况是，我的许多用户仍然在手机上运行旧的前端版本数周，这与新的后端版本不再兼容，但他们中的一些人在开始下一个会话时会得到更新

当我使用Webpack构建应用程序时，它会生成名称中带有哈希的bundle，而定义应使用的bundle的

index.html

文件会上载以下缓存控制属性：

“无缓存，无存储，必须重新验证”

。服务工作者文件具有相同的缓存策略

其想法是，用户的浏览器可以缓存所有内容，执行他们需要的第一个文件。计划很好，但我正在用新版本替换

index.html

文件，我的用户在重新启动应用程序时不会重新读取此文件

是否有明确的指南或解决该问题的方法

我也知道PWA应该离线工作，所以它必须具有缓存以重用的能力，但是这个想法也不能帮助我执行大规模的即时更新，对吗

---

我做这件事的最佳选择是什么？

你的基本想法是正确的。为什么您的index.html没有更新是一个很难回答的问题，因为您没有提供任何代码–请包括您的服务人员代码。请记住，根据Service Worker中实现的逻辑，它不一定遵循HTTP缓存头，而是缓存所有内容，包括index.html文件，就像现在发生的那样

为了让应用程序也在脱机模式下工作，您可能需要使用网络优先软件策略。首先使用网络，浏览器尝试从web加载文件，但如果失败，则返回到它尝试获取的特定文件的最新缓存版本。另一种选择是选择所谓的过时而重新验证策略。这首先为用户提供旧文件（速度非常快），然后在后台更新文件。还有其他策略，我建议您通读最广泛使用的SW库Workbox（）的文档

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

---

这对您有帮助吗？

我没有提供服务工作者代码，因为其中没有缓存逻辑。我决定将这些元标记（作为防止缓存的一种尝试）也添加到html页面的头部，如下所示。我会看看这是否有效，但你提供的链接可能会有用，解释会让事情更清楚。非常感谢

那么它是否有帮助？？