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；缓存与路由保持一致。测试清单版本切换：安装→激活→接管路径正确；提示可点击刷新。旧缓存清理：无陈旧资源污染；离线路径正常。