Service Worker 更新与版本治理：skipWaiting、clients.claim 与安全提示实践

背景与价值SW 更新行为影响缓存与路由；正确治理确保用户在合适时机获得新版本，避免中断与不一致。基本策略// sw.js self.addEventListener('install', (event: ExtendableEvent) => { // 预缓存或准备工作 // 可选择立即跳过等待进入 activate (self as any).skipWaiting(); }); self.addEventListener('activate', (event: ExtendableEvent) => { // 清理旧缓存与迁移 event.waitUntil((async () => { // ... await (self as any).clients.claim(); })()); }); 前台更新提示与刷新// main.js navigator.serviceWorker.addEventListener('message', (e) => { if (e.data?.type === 'sw-updated') { // 显示“更新可用”提示按钮，点击后刷新 location.reload(); } }); async function watchUpdates() { const reg = await navigator.serviceWorker.getRegistration(); reg?.addEventListener('updatefound', () => { const sw = reg.installing; sw?.addEventListener('statechange', () => { if (sw.state === 'installed') sw.postMessage({ type: 'sw-updated' }); }); }); } 指标验证（Chrome 128/Edge 130）更新覆盖率：新版本接管成功 ≥ 98%。故障率：更新后路由/缓存异常 ≤ 0.5%。体验：用户点击刷新到新版本耗时 ≤ 1.5s（P95）。回退策略遇到故障快速回滚到上一版本 SW；缓存与路由保持一致。测试清单版本切换：安装→激活→接管路径正确；提示可点击刷新。旧缓存清理：无陈旧资源污染；离线路径正常。