Workbox：当文件在缓存中时获取事件

Question

我使用 workbox 在我的项目中生成 service-worker。 工作箱文档：https://developers.google.com/web/tools/workbox

我的应用程序应该 100% 离线，所以我必须在第一次启动时将所有文件放入缓存中。我正在寻找一种方式向用户显示一条消息，说明应用已加载，离线准备就绪。

有没有办法知道所有文件何时都在缓存中并监听“所有文件都已缓存，让我们开始”或类似的事件？

Answer 1

您可以使用自定义插件监控预缓存的进度

const myPlugin = {
    cacheDidUpdate: async ({request, response, event}) => {
      // track progress of all precaching and communicate to the page using postMessage or BroadcastChannel
      return response;
    }
}

workbox.precaching.addPlugins([myPlugin]);

所有预缓存完成后，您可以向用户显示一条消息。

这是一种方法：

https://progressify.org/track-and-display-precaching-progress-in-a-pwa-with-workbox-and-broadcastchannel-api/