"Service Worker 离线缓存与更新策略实战"

Service Worker 离线缓存与更新策略实战const CACHE_NAME = 'app-v1'; const ASSETS = ['/','/index.html','/static/app.js','/static/app.css']; self.addEventListener('install', (e) => { e.waitUntil( caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)).then(() => self.skipWaiting()) ); }); self.addEventListener('activate', (e) => { e.waitUntil( caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))) ); self.clients.claim(); }); self.addEventListener('fetch', (e) => { const req = e.request; e.respondWith( caches.match(req).then(m => m || fetch(req)) ); }); 要点安装阶段批量缓存核心资源激活阶段清理旧版本并 `clients.claim()`对静态资源优先缓存命中，对动态 API 保持直连或单独策略总结标准的安装、激活与拦截流程可实现可靠的离线支持与可控的更新策略。