我如何监听对特定预缓存资源的更新？

Question

我的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期待错误的消息吗？它不应该与预缓存一起使用吗？如果是这样，那么有人对我如何可以简单地侦听预缓存资源的更新有其他想法吗？

Answer 1

之后似乎保留了CSS文件的过时副本。

确定。解决方案是向预缓存中添加自定义插件：

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

不知道工作箱BroadcastUpdatePlugin中发生了什么，但这可行。