Service Worker离线缓存与版本化更新实践

概述目标：通过Service Worker缓存关键资源与降级页面，实现离线可用与快速更新，避免旧资源长期滞留。适用：PWA与面向公众的Web应用。核心与实战注册与版本号：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js?ver=1.2.3') } sw.js缓存策略：const CACHE_NAME = 'app-cache-v1.2.3' const PRECACHE = ['/','/index.html','/styles.css','/app.js'] self.addEventListener('install', (event) => { event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE))) }) self.addEventListener('activate', (event) => { event.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))))) }) self.addEventListener('fetch', (event) => { const req = event.request event.respondWith( caches.match(req).then((cached) => cached || fetch(req).then((resp) => { const copy = resp.clone() caches.open(CACHE_NAME).then((cache) => cache.put(req, copy)) return resp }).catch(() => caches.match('/index.html'))) ) }) 示例强制更新：navigator.serviceWorker.getRegistrations().then((regs) => regs.forEach((r) => r.update())) 命中检查：caches.keys().then(console.log) 验证与监控离线可用：断网后访问是否仍能展示降级页面与关键资源。版本化与清理：检查旧版本缓存是否在`activate`中删除；确保`CACHE_NAME`升级覆盖生效。命中率与性能：观察资源命中与加载时间；结合`Server-Timing`头进行端到端关联。常见误区未清理旧缓存导致占用膨胀；需在`activate`阶段删除旧版本。将动态API响应长期缓存导致数据过期；需区分静态与动态资源策略。版本号未更新导致新资源不生效；需与构建版本对齐。结语Service Worker离线与版本化更新可显著提升Web可用性与性能，结合监控与版本治理保证持续正确性。