哪个Service Worker事件表明已控制页面可拦截Web流量？

navigator.serviceWorker.ready仅能保证对应作用域存在已激活的Service Worker，不会等待clients.claim()完成页面接管的异步流程，因此首次访问时会出现SW还没获得页面控制权、首个请求漏拦截的问题。硬编码等待时长的方案既影响体验也无法适配全量设备，不要使用。

你可以选择以下两种任意方案，都能实现首次访问、后续重载复用同一套等待逻辑的需求，且时机完全准确无额外延迟：

方案1：SW激活完成后主动上报就绪状态（最可靠，推荐） #

这个方案的触发时机完全和SW拦截能力生效时机对齐，没有边界问题：

• 在Service Worker的activate事件中，等clients.claim()执行完成后，主动向所有页面客户端发送就绪消息
• 页面侧统一判断：如果已经被SW控制则直接发起请求，否则等待SW发来的就绪消息后再发请求

代码示例：
Service Worker 侧代码：

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      // 此处放你原有的激活逻辑，比如旧缓存清理
      await self.clients.claim(); // 完成页面接管
      // 接管完成后向所有已打开的同域窗口页面发就绪通知
      const matchedClients = await self.clients.matchAll({ type: 'window' });
      matchedClients.forEach(client => {
        client.postMessage({ type: 'SW_INTERCEPT_READY' });
      });
    })()
  );
});

页面侧等待逻辑：

// 页面通用逻辑，首次访问、重载无需做区分
const waitForSWInterceptReady = () => new Promise((resolve) => {
  // 页面已被SW控制时直接返回，无额外等待
  if (navigator.serviceWorker.controller) return resolve();

  // 监听SW发来的就绪消息
  const onMessage = (e) => {
    if (e.data?.type === 'SW_INTERCEPT_READY') {
      navigator.serviceWorker.removeEventListener('message', onMessage);
      resolve();
    }
  };
  navigator.serviceWorker.addEventListener('message', onMessage);

  // 触发SW注册，注册失败时降级直接resolve，避免阻塞页面
  navigator.serviceWorker.register('/sw.js').catch(resolve);
});

// 调用方式：等待就绪后再发起需要被拦截的请求
await waitForSWInterceptReady();
fetch(yourRequest);

方案2：页面侧监听controllerchange事件（无需修改SW代码） #

如果不想改动Service Worker侧代码，可以直接监听页面navigator.serviceWorker上的controllerchange事件：该事件会在当前页面的控制权正式移交到新的Service Worker时触发，正好对应SW可以开始拦截页面请求的时机。

页面侧等待逻辑代码：

const waitForSWInterceptReady = () => new Promise((resolve) => {
  if (navigator.serviceWorker.controller) return resolve();

  // 控制权移交完成时触发
  navigator.serviceWorker.addEventListener('controllerchange', resolve, { once: true });

  navigator.serviceWorker.register('/sw.js').catch(resolve);
  // 兜底逻辑：结合ready状态二次校验，避免极端场景漏触发
  navigator.serviceWorker.ready.then(() => {
    if (navigator.serviceWorker.controller) resolve();
  });
});

注意：该方案依赖你在SW中调用clients.claim()的逻辑——如果没有调用该方法，首次加载时controllerchange不会触发，需要下次页面刷新才能被SW控制，你的场景已经在使用clientsClaim()，不存在这个问题。

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