检测 Workbox 预缓存何时完成

Question

我需要一个事件或插件来知道预缓存过程在服务工作者内部成功完成。

我知道如何完成它

self.serviceWorker.addEventListener('statechange', function() {
   if (this.state === 'installed') {
     ...
   }
});

但是如何使用 workbox？

Answer 1

Workbox 预缓存也在 install 事件期间进行，因此您可以监听类似的状态更改。

另外，如果你想要更细粒度的报告，你可以在你的 service worker 中使用 Workbox plugin 然后调用 postMessage() 打开客户端报告状态（当一切都是完成，或在缓存每个响应之后）：

import {addPlugins, precacheAndRoute} from '../../packages/workbox-precaching';

const manifest = self.__WB_MANIFEST || [];
const manifestSize = manifest.length;
let precacheCount = 0;

async function sendToClients(message) {
  const clients = await self.Clients.matchAll();
  for (const client of clients) {
    client.postMessage(message);
  }
}

const handlerDidComplete = async ({request, error, event}) => {
  if (event.type === 'install') {
    if (error) {
      sendToClients(`Error while precaching ${request.url}: ${error}`);
    } else {
      precacheCount++;
      if (precacheCount >= manifestSize) {
        sendToClients(`Finished precaching ${manifestSize} entries.`);
      }
    }
  }
};

addPlugins([{handlerDidComplete}]);
precacheAndRoute(manifest);

然后您将使用 navigator.serviceWorker.addEventListener('message', () => {...}) 在您的客户端页面中收听这些消息。

同样，这是可选的，因为即使您使用的是 Workbox，您也可以仅依靠内置 API 来监听服务工作者生命周期的变化。

检测 Workbox 预缓存何时完成

Detecting when Workbox precaching has completed

service-worker

workbox