Request.destination 类型化缓存路由与策略实践

概述不同资源类型适合不同缓存策略。本文在 Service Worker 中按 `destination` 做策略分发。路由与策略self.addEventListener('fetch', event => { const dest = event.request.destination; if (dest === 'image' || dest === 'font') { event.respondWith(cacheFirst(event, 'static-v1')); } else if (dest === 'script' || dest === 'style') { event.respondWith(staleWhileRevalidate(event, 'assets-v1')); } else if (dest === 'document') { event.respondWith(networkFirst(event, 'pages-v1')); } }); async function cacheFirst(event, name) { const cache = await caches.open(name); const cached = await cache.match(event.request); if (cached) return cached; const res = await fetch(event.request); cache.put(event.request, res.clone()); return res; } async function staleWhileRevalidate(event, name) { const cache = await caches.open(name); const cached = await cache.match(event.request); const networkPromise = fetch(event.request).then(res => { cache.put(event.request, res.clone()); return res; }); return cached || networkPromise; } async function networkFirst(event, name) { const cache = await caches.open(name); try { const res = await fetch(event.request); cache.put(event.request, res.clone()); return res; } catch { const cached = await cache.match(event.request); return cached || new Response('', { status: 503 }); } }