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));

}

});