Cache Storage TTL 与类型分组清理实践

概述按类型与 TTL 管理缓存可在保证新鲜度的同时控制容量。本文给出 SW 内的分组与清理策略示例。分组与写入const GROUPS = { images: 'img-v1', assets: 'assets-v1' }; async function cachePut(group, request, response) { const cache = await caches.open(GROUPS[group]); const now = Date.now(); const meta = new Headers(response.headers); meta.set('X-Cached-At', String(now)); await cache.put(request, new Response(await response.clone().body, { headers: meta })); } TTL 清理async function cleanupTTL(group, ttlMs) { const cache = await caches.open(GROUPS[group]); const keys = await cache.keys(); for (const req of keys) { const res = await cache.match(req); const at = Number(res.headers.get('X-Cached-At') || 0); if (Date.now() - at > ttlMs) await cache.delete(req); } }