PWA 项目怎么检测新版本 Service Worker 的安装与就绪状态-H5教程-PHP中文网

新版本 Service Worker 安装完成并进入就绪状态需满足三个条件：触发 activated 状态、成功执行 clients.claim()、且 controller 指向新实例；还可结合 skipWaiting() 加速激活，并通过服务端版本比对确保更新生效。

pwa 项目怎么检测新版本 service worker 的安装与就绪状态

检测新版本 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”，否则不会推进。