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

Question

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

例如名为“1.ChunkName.abc.js”的文件可能会变为“1.ChunkName.def.js”。

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

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

1. 不要删除旧文件以使旧版本仍然有效。
2. 使用 service worker 检查更新。
3. 不知何故使用 MQTT/WebSockets 让用户更新到最新版本。

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

那么，如果在用户使用 PWA 期间推出更新，我如何确保用户获得无缝体验？

Answer 1

我使用的解决方案是只存储文件名的公共部分，例如1.Chunkname 而不是1.ChunkName.abc.js。

因此，当您从缓存中获取它们时，您可以将第一部分与正则表达式进行比较，并且仅在缓存不可用时回退到完整的 event.request.url 网络响应。

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