工作箱：当文件在缓存中时获取事件

Question

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

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

有没有办法知道所有文件何时都在缓存中并侦听说 "all files are cached, let's go" 或类似内容的事件？

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/