Service Worker更新与安全生命周期（skipWaiting/clientsClaim/版本化）最佳实践

一、注册与更新if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js').then(reg => { if (reg.waiting) reg.waiting.postMessage({ type: 'SKIP_WAITING' }) reg.addEventListener('updatefound', () => { const worker = reg.installing if (worker) worker.addEventListener('statechange', () => { if (worker.state === 'installed' && navigator.serviceWorker.controller) { worker.postMessage({ type: 'SKIP_WAITING' }) } }) }) }) }) } 二、SW核心与版本化缓存const VERSION = 'v1.0.0' const CACHE = 'app-cache-' + VERSION self.addEventListener('install', (event: any) => { ;(self as any).skipWaiting() event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(['/','/index.html','/app.css','/app.js']))) }) self.addEventListener('activate', (event: any) => { event.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(k => !k.endsWith(VERSION)).map(k => caches.delete(k)))).then(() => (self as any).clients.claim())) }) self.addEventListener('message', (event: any) => { if (event.data?.type === 'SKIP_WAITING') (self as any).skipWaiting() }) self.addEventListener('fetch', (event: any) => { const req = event.request event.respondWith(caches.match(req).then(r => r || fetch(req))) }) 三、回退与安全async function safeFetch(req: Request): Promise<Response> { try { return await fetch(req) } catch { return new Response('offline', { status: 503 }) } } 四、验收清单注册与更新流程包含`skipWaiting/clientsClaim`；安装阶段预缓存版本化资源。激活时清理旧版本缓存；消息通道触发跳过等待；离线回退响应。资源列表最小化且使用版本化路径；更新发布可控与可回退。