要让新注册的 Service Worker 立即控制当前页面，需在 sw.js 开头调用 self.skipWaiting() 并在 activate 事件中通过 event.waitUntil(self.clients.claim()) 主动接管。

要让新注册的 Service Worker 立即控制当前页面（而不是等待用户关闭再重新打开），关键在于主动调用 clients.claim()，并确保它在 Service Worker 激活阶段正确执行。

为什么需要 clients.claim()

默认情况下，新 Service Worker 安装后会进入 waiting 状态，直到所有已打开的页面关闭（或刷新）才会激活并接管控制权。调用 clients.claim() 可以让刚激活的 Service Worker 立即尝试控制当前 clients（即当前页面），无需等待下一次导航或刷新。

在 Service Worker 中正确调用 self.clients.claim()

必须在 activate 事件中调用，且建议在 event.waitUntil() 内包裹，确保 claim 完成后再完成激活：

self.addEventListener('activate', event => {
  event.waitUntil(
    self.clients.claim().then(() => {
      console.log('Service Worker 已立即接管当前页面');
    })
  );
});

配合 skipWaiting 实现“安装即激活”

仅 claim() 不够——如果新 SW 卡在 waiting 阶段，根本不会走到 activate。因此前端注册时需主动跳过等待：

• 注册脚本中调用 registration.waiting?.postMessage({type: 'SKIP_WAITING'})（适用于已有 waiting 的旧 SW）
• 更常用的是在新 SW 文件顶部加 self.skipWaiting();，确保安装后立刻进入 activate 阶段

// sw.js 开头就写
self.skipWaiting();

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

注意兼容性与边界情况

clients.claim() 在 Chrome 46+、Firefox 44+、Edge 79+ 和 Safari 15.4+ 支持。但需注意：

• 只能在 activate 事件中调用，其他时机（如 install 或 fetch）会报错
• 若页面已由另一个 SW 控制，claim() 会失败（返回 rejected Promise），可忽略或记录日志
• 调用成功后，后续 fetch 事件将由当前 SW 处理，但已发出的请求（如页面加载中的资源）不受影响