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

Question

我在我的项目中使用workbox生成service-worker。 工作箱doc：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/