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`；安装阶段预缓存版本化资源。激活时清理旧版本缓存；消息通道触发跳过等待；离线回退响应。资源列表最小化且使用版本化路径；更新发布可控与可回退。