概述`Vary` 指示缓存按指定请求头维度区分条目。本文结合前端命名策略,降低错配风险。前端策略示例self.addEventListener('fetch', event => { const url = new URL(event.request.url); if (url.pathname.startsWith('/api/variant')) { event.respondWith((async () => { const res = await fetch(event.request); const vary = res.headers.get('Vary') || ''; const cache = await caches.open('variant-v1'); const key = new Request(url.origin + url.pathname + '?v=' + (vary || 'none'), { headers: event.request.headers }); await cache.put(key, res.clone()); return res; })()); } }); 注意事项服务端合理设置 `Vary`,例如语言、压缩方式(`Accept-Language`, `Accept-Encoding`)。前端缓存键命名包含版本或 `Vary` 维度,以便正确命中。

发表评论 取消回复