如何利用 skipWaiting 实现新 Service Worker 立即接管-js教程-PHP中文网

要让新注册的 service worker 立即接管页面，需在 install 事件中调用 self.skipwaiting()，并在 activate 事件中调用 clients.claim()，同时前端配合监听 controllerchange 并刷新页面。

要让新注册的 service worker 立即接管页面（跳过等待状态），关键是在新 sw 的 install 事件中调用 self.skipwaiting()，并确保旧 sw 已释放控制权（例如通过 clients.claim()）。

在新 Service Worker 中主动跳过等待

默认情况下，新 SW 安装成功后会进入 waiting 状态，直到所有受控页面关闭或刷新才激活。要绕过这一机制，需在新 SW 的 install 回调中立即调用 skipWaiting()：

必须在 install 事件中调用，且通常放在 event.waitUntil(...) 内部或之后
不能在 activate 中调用 —— 此时已错过时机
示例代码：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v2').then((cache) => cache.addAll(['/style.css', '/app.js']))
  );
  // 紧随其后调用，触发跳过等待
  self.skipWaiting();
});

在 activate 阶段声明控制权

即使新 SW 跳过了等待、进入 activating 状态，它仍不会自动控制未被旧 SW 管理的页面（比如刚打开的 tab）。需在 activate 事件中调用 clients.claim()：

该方法让新 SW 立即尝试接管所有当前 clients（包括已打开但未被控制的页面）
通常配合 event.waitUntil() 使用，确保 claim 完成后再完成 activate
示例：

self.addEventListener('activate', (event) => {
  event.waitUntil(
    clients.claim().then(() => {
      console.log('New SW now controls all clients');
    })
  );
});

前端注册逻辑需配合刷新

仅靠 SW 端设置还不够。用户当前页面仍由旧 SW 控制，需主动触发更新流程：

监听 controllerchange 事件，感知控制权切换（可用于提示用户“新版本已就绪”）
调用 location.reload() 强制刷新，使新 SW 生效（这是最直接的方式）
更友好的做法：检测到更新后，显示提示按钮，点击后执行 swRegistration.waiting.postMessage('skipWaiting') + location.reload()

注意生命周期与调试技巧

跳过等待虽快，但可能引发资源不一致问题（如缓存 v1 页面引用 v2 JS）：

确保 install 阶段预缓存完整，避免 activate 后请求失败
在 Chrome DevTools > Application > Service Workers 中勾选 “Update on reload” 和 “Skip waiting”，便于本地测试
可通过 navigator.serviceWorker.controller 查看当前控制 SW，registration.waiting 检查是否有待激活 SW