Service Worker 安装成功后怎么立即接管未控制的页面-H5教程-PHP中文网

service worker 安装后默认等待激活，需调用 self.skipwaiting() 跳过 waiting 状态，并在 activate 事件中调用 clients.claim() 声明控制权，才能立即接管当前页面。

service worker 安装成功后怎么立即接管未控制的页面

Service Worker 安装成功后默认不会立即接管页面，而是进入 waiting 状态，直到所有已打开的页面都关闭或重新加载（且旧 SW 已失效）才会激活并接管。若想让它安装成功后立刻激活、立即控制当前页面，关键在于打破“等待”逻辑，主动推进生命周期。

为什么新 Service Worker 不会马上接管？

新版 SW 安装完成后，自动进入 waiting 状态；
浏览器会保留旧版 SW 继续控制已有页面，防止不兼容更新导致白屏或异常；
只有当所有受控页面都被关闭（或强制刷新并跳过旧 SW）时，新版才被激活并触发 controllerchange；
单纯刷新页面，旧 SW 仍驻留，新 SW 仍在 waiting，不会触发接管。

让新 SW 立即激活并接管当前页面的两种可靠方式

在新 SW 脚本中调用 self.skipWaiting()
在 install 事件里调用它，告诉浏览器：“我不需要等，现在就跳过 waiting，准备激活”。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache-v2').then((cache) => {
      return cache.addAll(['/index.html', '/main.css', '/app.js']);
    })
  );
  // ? 关键：跳过 waiting，让新 SW 立即进入 activating 状态
  self.skipWaiting();
});

在页面 JS 中主动触发 waitUntil() 后的 claim()
skipWaiting() 只是让新 SW 进入激活状态，但已打开的页面仍由旧 SW 控制；要让当前页面立刻被新 SW 接管，需在 activate 事件中调用 clients.claim()：
```
self.addEventListener('activate', (event) => {
  event.waitUntil(
    self.clients.claim() // ? 关键：声明对所有当前 clients（页面）的控制权
  );
});
```
⚠️ 注意：clients.claim() 必须在 activate 阶段调用，且仅对当前已打开、尚未被其他 SW 控制的页面生效（比如刚注册、尚未被控制的 tab）。配合 skipWaiting() 使用，才能实现“安装完 → 激活 → 立即接管”的闭环。

Google Service Accounts
通过 Google 服务账户在代码中读取或写入用户的 Google 表格、文档、云盘或日历——无头、无需 OAuth 浏览器流程。适用于已获得服务账户凭证的情况。

下载

页面端还需配合监听 `controllerchange` 并刷新提示（可选）

虽然 controllerchange 在刷新后不触发（因旧 SW 仍控制），但你在调用 skipWaiting() + clients.claim() 后，下一次 fetch 请求就会走新 SW。你可以主动监听该事件，在用户下次交互前提示更新：

navigator.serviceWorker.addEventListener('controllerchange', () => {
  console.log('当前页面已由新 Service Worker 控制');
  // 可在此处提示用户：“新版本已就绪，点击刷新体验最新功能”
});

✅ 触发时机：这个事件会在 clients.claim() 成功执行后、且当前页面的 controller 实际切换完成时触发——通常就在 activate 结束后立即发生（不需要刷新）。

补充：避免常见陷阱

不要在 install 里只写 skipWaiting() 却漏掉 clients.claim() → 新 SW 激活了，但页面仍归旧 SW 管；
不要在页面未注册 SW 前就监听 controllerchange → 事件不会冒泡，需确保注册完成后再绑定；
skipWaiting() 和 clients.claim() 都是幂等操作，多次调用无副作用，可放心使用；
开发时可通过 chrome://inspect/#service-workers 查看当前 controller、waiting、active 状态，验证是否生效。