HTTP Cache-Control 指令矩阵与前端缓存适配实践

概述合理的指令矩阵能在前端与服务端间保持一致的缓存策略。本文给出典型指令与前端适配示例。常用指令与含义`no-store`：不缓存；前端直接跳过缓存逻辑。`no-cache`：可缓存但每次需重新验证；前端可保留条目但优先网络。`max-age=NN`：在 NN 秒内认为新鲜；前端可采用 `cache-first`。`immutable`：版本化资源不变；前端可长期缓存。前端适配示例self.addEventListener('fetch', event => { event.respondWith((async () => { const res = await fetch(event.request); const cc = (res.headers.get('Cache-Control') || '').toLowerCase(); if (cc.includes('no-store')) return res; const cache = await caches.open('http-cc'); if (cc.includes('no-cache')) { await cache.put(event.request, res.clone()); return res; } await cache.put(event.request, res.clone()); return res; })()); });