调用 self.skipwaiting() 可让新 service worker 跳过 waiting 状态立即激活，但需配合 install 阶段调用、客户端主动更新提示及接管后刷新页面才能真正生效。
调用 self.skipWaiting() 可以让新注册的 Service Worker 跳过 waiting 状态，立即进入 active 状态并接管页面。但这只是必要条件之一，需配合正确的生命周期控制和客户端更新逻辑才能真正实现“立即接管”。
理解 waiting 状态的成因
当新版本 Service Worker 已安装（install），但旧版仍在控制页面（controlled）时，新版会停留在 waiting 状态——这是浏览器的默认保护机制，防止未预期的缓存切换影响已加载资源。
只有在以下任一条件满足时，waiting 的 SW 才可能被唤醒：
- 所有受控页面全部关闭（包括 iframe 和 clients.openWindow 创建的窗口）
- 主动调用
self.skipWaiting()，且当前没有其他 active 的 SW 正在控制页面（或它已决定放弃控制权）
在 install 阶段调用 skipWaiting
最常用、最稳妥的方式是在新 SW 的 install 事件中立即调用：
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v2').then((cache) => cache.addAll(['/style.css', '/app.js']))
);
// 立即声明：安装完成后不等待，直接跳过 waiting
self.skipWaiting();
});
⚠️ 注意：skipWaiting() 必须在 install 事件中调用（或更早），不能等到 activate 阶段——因为 waiting 中的 SW 不会触发 activate。
确保客户端主动请求更新
仅靠 skipWaiting() 不足以“立即接管”，前端页面还需主动检查并提示更新：
- 监听
controllerchange事件，捕获接管完成时刻 - 调用
navigator.serviceWorker.register()后，检查registration.waiting是否存在；若有，调用其postMessage({type: 'SKIP_WAITING'}) - 在新 SW 中监听 message 事件，并在收到后执行
self.skipWaiting()
例如，在页面中：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then((reg) => {
if (reg.waiting) {
reg.waiting.postMessage({ type: 'SKIP_WAITING' });
}
reg.onupdatefound = () => {
const newWorker = reg.installing;
newWorker.onstatechange = () => {
if (newWorker.state === 'activated') {
window.location.reload(); // 可选：接管后刷新以加载新资源
}
};
};
});
}
接管后刷新页面以生效新逻辑
即使 SW 已 active，当前页面仍使用旧资源（HTML、JS、CSS 已加载完毕）。要让新缓存/新逻辑生效，通常需要刷新：
- 在 activate 事件中可调用
clients.claim()，使新 SW 立即控制当前页面（对 fetch 拦截有效，但不影响已加载脚本） - 更彻底的做法是：在页面检测到 controllerchange 后，提示用户“有新版本，点击刷新”或自动 reload
- 注意避免无限刷新循环：可在 reload 前设置 localStorage 标记，或判断
navigator.serviceWorker.controller?.scriptURL是否已更新
