如何检测Workbox precaching执行完成，在Service Worker中获取预缓存成功事件

方式1：Service Worker内部直接监听专属事件 #

这是最简便的方案，Workbox内置了precache完成的专属事件，无需判断Service Worker的状态：

• 首先导入需要的Workbox模块，配置常规precache逻辑
• 监听workbox:precache:complete事件即可，该事件会在所有precache列表内的资源全部缓存成功后触发
  代码示例：

import { precacheAndRoute } from 'workbox-precaching';
import { addEventListener } from 'workbox-core';

// 常规precache注册逻辑
precacheAndRoute(self.__WB_MANIFEST);

// 监听precache完成事件
addEventListener('workbox:precache:complete', (event) => {
  // event.detail 包含本次precache的详细信息：
  // updatedEntries：更新的缓存条目
  // addedEntries：新增的缓存条目
  // isFirstInstall：是否为首次安装Service Worker
  console.log('Precache流程执行成功', event.detail);
  // 此处写入你需要执行的后续逻辑
});

如果需要捕获precache失败的场景，可以补充监听workbox:precache:failed事件。

方式2：页面主进程中监听precache完成状态 #

如果你的业务逻辑需要在前端页面代码中获知precache完成状态，可以结合Service Worker消息通信实现：

1. 首先在Service Worker中补充逻辑，precache完成后给页面发送通知：

import { precacheAndRoute } from 'workbox-precaching';
import { addEventListener } from 'workbox-core';

precacheAndRoute(self.__WB_MANIFEST);

addEventListener('workbox:precache:complete', () => {
  // 给所有受控页面发送precache完成消息
  self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      client.postMessage({
        type: 'PRECACHE_COMPLETE'
      });
    });
  });
});

2. 页面主进程中监听来自Service Worker的消息即可：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
  
  // 监听Service Worker发来的消息
  navigator.serviceWorker.addEventListener('message', (event) => {
    if (event.data.type === 'PRECACHE_COMPLETE') {
      console.log('Precache流程已执行完成');
      // 此处写入页面侧的业务逻辑
    }
  });
}

说明 #

原生statechange监听installed状态的方式也可以配合Workbox使用，但相比专属事件存在两个局限：一是无法直接获取precache的具体执行信息，二是如果自定义修改了install事件的等待逻辑可能出现时序偏差，更推荐使用上述Workbox专属事件的方案。

内容的提问来源于stack exchange，提问作者Vadim