如何侦听特定预缓存资源的更新？答案

【问题标题】：How do I listen for updates to specific precached resources?如何侦听特定预缓存资源的更新？
【发布时间】：2020-04-30 14:35:15
【问题描述】：

我的 PWA 预缓存中有一堆由 Workbox 管理的文件。我将如何监听这些预缓存文件的更新？

背景： Safari 似乎在 window.location.reload() 之后保留了 CSS 文件的过时副本，因此如果我的应用程序更新包括对 CSS 的更新，我希望能够告诉用户force-close 并重启应用。

我已尝试添加BroadcastUpdate 插件：

workbox.precaching.addPlugins([
    new workbox.broadcastUpdate.BroadcastUpdatePlugin(),
]);

完成此操作后，如果新的 Service Worker 版本带来了新版本的预缓存文件，我预计会发送消息。然后我要检查消息事件，如果 URL 以 .css 结尾，我可以要求用户在相关时刻强制关闭。

但是，当我更新应用程序时没有发送任何消息（使用 injectManifest 更新预缓存清单并调用 reg.update()）。

我知道消息侦听器代码正在运行。我在其他地方使用它。但是BroadcastUpdatePlugin 在预缓存文件更改时似乎没有发送任何消息。

这里有什么问题？我只是在期待BroadcastUpdatePlugin 的错误吗？它不应该与预缓存一起使用吗？如果是这样，是否有人对我如何简单地监听预缓存资源的更新有任何其他想法？

【问题讨论】：

标签： progressive-web-apps workbox

【解决方案1】：

好的。解决方案是在预缓存中添加一个自定义插件：

const precacheUpdatePlugin = {
    cacheDidUpdate: async ({request, response, event}) => {
        if (/^.*\.css.*$/.test(request.url)) {
            self.sendMessageToAllClients('CSS_UPDATE_DETECTED');
        }
    }
}
workbox.precaching.addPlugins([
    precacheUpdatePlugin,
]);

不知道 Workbox BroadcastUpdatePlugin 中发生了什么，但这是可行的。

【讨论】：