Vue.js 如何强制用户使用最新版本的PWA？

我们最近发布了一个渐进式web应用程序，但在发布PWA更新时遇到了问题。当我们推送应用程序的新版本时，我们的大多数发行版js文件都会被重命名

e、 g.名为“1.ChunkName.abc.js”的文件可能会变成“1.ChunkName.def.js”

因此，在我们发送更新之前加载PWA的任何用户都将使用旧版本，该版本仍在查找旧的已删除文件，这破坏了PWA的大部分功能。如果用户刷新页面，则此问题已修复，但显然，我们不能期望用户在遇到错误时刷新页面

我看到的一些解决方案是：

不要删除旧文件以允许旧版本仍然工作

使用服务工作者检查更新

以某种方式使用MQTT/WebSockets让用户更新到最新版本

但我觉得所有这些都有很大的缺点

---

那么，如果用户在使用PWA时推出更新，我如何确保用户拥有无缝的体验呢？

我使用的解决方案是只存储文件名的公共部分，例如

1.Chunkname

，而不是

1.Chunkname.abc.js

因此，当您从缓存中获取它们时，您可以将第一部分与regex进行比较，并且只有在缓存不可用时，才能回退到完整的

event.request.url

网络响应

在缓存中存储所有版本的内容绝对不是一个好策略。上述方法的典型用法是，当图像大小不同（后缀为'-16_16'，'-32_32'）时，不会缓存所有图像。相反，您只存储一个不带后缀的文件