Service Worker Cache Storage stale-while-revalidate 与资源-API 协同实践

概览SWR（stale-while-revalidate）在首次命中缓存后快速返回旧内容，并在后台拉取新内容更新缓存。结合静态资源与 API 可显著提升体验与稳定性。sw.jsconst CACHE = 'app-v1' self.addEventListener('install', (event) => { event.waitUntil(caches.open(CACHE)) }) self.addEventListener('fetch', (event) => { const req = event.request if (req.method !== 'GET') return event.respondWith((async () => { const cache = await caches.open(CACHE) const cached = await cache.match(req) const networkPromise = fetch(req).then((res) => { if (res && res.status === 200) cache.put(req, res.clone()) return res }).catch(() => cached) return cached || networkPromise })()) }) API 协同// 对 /api/ 前缀使用同样策略，但设置短期缓存更新 self.addEventListener('fetch', (event) => { const url = new URL(event.request.url) if (url.pathname.startsWith('/api/')) { event.respondWith((async () => { const cache = await caches.open(CACHE) const cached = await cache.match(event.request) const networkPromise = fetch(event.request).then((res) => { if (res && res.status === 200) cache.put(event.request, res.clone()) return res }).catch(() => cached) return cached || networkPromise })()) } }) 治理要点对易变数据设置较短的缓存更新周期；对静态资源设置较长周期。避免缓存私有或敏感数据；对鉴权请求跳过缓存。配合 Navigation Preload 与优先级提示，进一步降低 TTFB。验证与指标浏览器：Chrome/Edge 支持 SW；Safari/Firefox策略需适配弱网下首屏与列表响应更快；后台更新可靠