新版本 Service Worker 安装完成并进入就绪状态需满足三个条件：触发 activated 状态、成功执行 clients.claim()、且 controller 指向新实例；还可结合 skipWaiting() 加速激活，并通过服务端版本比对确保更新生效。
检测新版本 Service Worker 是否安装完成并进入就绪状态，关键在于监听其生命周期事件，并结合客户端控制逻辑主动确认。Safari、Chrome 等浏览器行为略有差异，但核心机制一致：不能只靠注册成功就认为已生效，必须验证是否 activated 且已接管页面。
监听 statechange 事件捕获状态流转
Service Worker 实例会触发 statechange 事件，反映其内部状态变化。在主线程注册后，可监听该事件获取精确阶段：
- 注册成功后，从
installing→installed表示新 SW 已完成 install 事件（如缓存资源）； - 从
installed→activating表示正在执行 activate 事件（如清理旧缓存）； - 进入
activated状态，才代表它已就绪，能拦截 fetch 请求并控制当前页面。
示例代码（放在注册逻辑后）：
const registration = await navigator.serviceWorker.register('/sw.js');<br>registration.addEventListener('updatefound', () => {<br> const newWorker = registration.installing;<br> newWorker?.addEventListener('statechange', () => {<br> if (newWorker.state === 'activated') {<br> console.log('新 Service Worker 已激活，开始接管页面');<br> // 可在此触发 UI 提示或自动刷新<br> }<br> });<br>});
检查 clients.claim() 是否生效
即使新 SW 激活了，它默认也不会立即控制当前打开的页面（尤其在已有旧 SW 运行时）。需在 activate 事件中调用 self.clients.claim()，并配合主线程确认：
service-qa-coach
下载
评估聊天、邮件、电话、社交平台私信（DM）或电商平台客服团队的服务质量。适用于团队需要制定 QA 评分卡、故障模式分析、辅导计划、校准检查清单或服务改进简报，但无法访问实时工单系统、CRM 或联络中心系统的情况。
- 确保 service-worker.js 的 activate 事件里有
self.clients.claim()； - 主线程可通过
navigator.serviceWorker.controller判断当前控制者是否为最新实例； - 若为
null，说明尚未接管，可能还在等待或被阻塞。
简单验证方式：
if (navigator.serviceWorker.controller) {<br> console.log('当前受控于:', navigator.serviceWorker.controller.scriptURL);<br>} else {<br> console.log('尚未被 Service Worker 控制');<br>}
利用 skipWaiting() 加速更新就绪
当新 SW 卡在 waiting 状态（常见于 Safari 或已有活跃 SW 时），它不会自动激活。必须显式调用 skipWaiting()：
- 可在 service-worker.js 的 install 事件末尾加
self.skipWaiting()，让新 SW 跳过 waiting 直接进入 activating； - 也可在主线程通过
registration.waiting?.postMessage({type: 'SKIP_WAITING'})触发（需 SW 内监听 message 并执行）； - Safari 中必须手动右键 Application 面板里的 Waiting 条目选 “Skip Waiting”，否则不会推进。
服务端版本标识 + 前端比对（推荐用于生产）
仅靠生命周期事件不够可靠，尤其在多标签页、后台运行等复杂场景。更稳妥的做法是引入语义化版本控制：
- 在 sw.js 开头定义一个常量版本号，如
const VERSION = 'v2.3.1';； - 构建时将该版本写入一个轻量 JSON 接口（如
/version.json），返回当前部署版本； - 前端定时或启动时请求该接口，与
navigator.serviceWorker.controller?.scriptURL对应的版本比对； - 不一致即说明有新 SW 已注册但未激活，可提示用户刷新或自动调用
registration.update()。
