Cache Storage API 与 HTTP 缓存协同策略

前言前端需在体验与新鲜度间权衡。本文提供 Cache Storage 与 HTTP 条件请求协同的可实施方案。能力检测const supportsCaches = 'caches' in self || 'caches' in window; 条件请求与 ETag 协同async function revalidate(url, cached) { const etag = cached.headers.get('ETag') || ''; const res = await fetch(url, { headers: etag ? { 'If-None-Match': etag } : {} }); return res; } async function cacheFirstRevalidate(event) { const cache = await caches.open('cf-rv'); const cached = await cache.match(event.request); if (cached) { event.waitUntil( revalidate(event.request.url, cached).then(res => { if (res && res.ok) cache.put(event.request, res.clone()); }) ); return cached; } const res = await fetch(event.request); if (res && res.ok) cache.put(event.request, res.clone()); return res; } 路由集成示例self.addEventListener('fetch', event => { const url = new URL(event.request.url); if (url.pathname.startsWith('/api/')) { event.respondWith(cacheFirstRevalidate(event)); } });