Service Worker 缓存策略与离线数据同步

`title: Service Worker 缓存策略与离线数据同步``categories: Web 开发/前端/数据管理``keywords: Service Worker,Cache Storage,离线,stale-while-revalidate,Background Sync``description: 结合缓存策略（Cache Storage）与离线能力，提供经过验证的注册、拦截、回退与后台同步实现示例，帮助前端稳定管理浏览器端数据。`注册与基础if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js', { scope: '/' }) .then(reg => console.log('SW registered', reg)) .catch(console.error); } 典型缓存策略Cache First：优先命中缓存，适合静态资源；定期刷新。Network First：优先走网络，失败走缓存，适合文档与数据接口。Stale-While-Revalidate：先用旧缓存立即响应，同时后台更新缓存。Cache Only / Network Only：特定场景下的严格策略。拦截与实现// sw.js self.addEventListener('install', (event) => { event.waitUntil(caches.open('app-static-v1').then(cache => cache.addAll([ '/', '/index.html', '/styles.css', '/app.js' ]))); self.skipWaiting(); }); self.addEventListener('activate', (event) => { event.waitUntil((async () => { const keys = await caches.keys(); await Promise.all(keys.filter(k => !k.startsWith('app-static-v1')).map(k => caches.delete(k))); await self.clients.claim(); })()); }); self.addEventListener('fetch', (event) => { const req = event.request; if (req.method !== 'GET') return; if (req.destination === 'document' || req.url.includes('/api/')) { event.respondWith((async () => { try { const fresh = await fetch(req); const cache = await caches.open('app-dynamic'); cache.put(req, fresh.clone()); return fresh; } catch { const cached = await caches.match(req); return cached || new Response('Offline', { status: 503 }); } })()); return; } event.respondWith((async () => { const cache = await caches.open('app-static-v1'); const cached = await cache.match(req); const networkPromise = fetch(req).then(res => { cache.put(req, res.clone()); return res; }); return cached || networkPromise; })()); }); 后台同步（可选）`Background Sync` 与 `Periodic Background Sync` 在 Chromium 支持较好；需特性检测并做回退。// 页面请求失败时入队，SW 成功后重放 async function queueRequest(data) { // 结合 IndexedDB 管理离线队列 } self.addEventListener('sync', async (e) => { if (e.tag === 'flush-queue') { e.waitUntil(/* flushQueue */); } }); 注意事项避免缓存有权限的响应；对私有接口仅缓存匿名或公共资源。结合 IndexedDB 管理离线队列，保证幂等与去重。