only-if-cached 是 cache-control 指令，要求浏览器仅从本地缓存读取资源，不发起网络请求；命中则返回 200 响应，未命中直接报 net::err_cache_miss 错误。
only-if-cached 是一个请求头（Request Header），它的作用非常明确：告诉浏览器“只从本地缓存中取资源，绝不发起网络请求”。如果缓存中没有该资源，浏览器不会回源，而是直接失败——通常表现为 net::ERR_CACHE_MISS（Chrome）或类似网络错误，状态码也不会是 200 或 304，而是根本不会触发 HTTP 响应。
这个头不是用来“优化缓存逻辑”的，而是用于离线场景、强制缓存兜底、或调试验证缓存存在性的特殊策略。
✅ 它怎么起作用？
当你在请求中显式设置：
Cache-Control: only-if-cached
（注意：它属于 Cache-Control 指令，不是独立请求头；HTTP 规范中没有 only-if-cached 单独的 header 字段）
浏览器收到后会：
- 完全跳过网络请求流程；
- 仅检查本地 HTTP 缓存（disk cache / memory cache）是否存在且未过期的完整响应；
- 如果命中 → 返回该缓存响应（状态码仍是 200，但 DevTools 显示
from cache或from disk cache）； - 如果未命中（无缓存、已过期、或只有部分缓存如不完整 chunk）→ 直接中断请求，不发包，报错（如
Failed to load resource: net::ERR_CACHE_MISS）。
⚠️ 关键点：
它不触发协商缓存（即不会发 If-None-Match / If-Modified-Since），也不走强缓存判断逻辑——它是“纯缓存读取模式”。
✅ 如何使用？（实操方式）
1. Fetch API 中设置
fetch('/api/data.json', {
cache: 'only-if-cached', // ✅ 标准用法（注意：这是 Request 的 cache 选项，不是 headers）
credentials: 'same-origin' // 若需带 cookie，确保兼容（但 only-if-cached 下 credential 实际无效）
})
.then(res => {
if (res.ok) return res.json();
throw new Error('Cached response missing');
})
.catch(err => {
console.error('No cache available:', err); // 此处捕获 ERR_CACHE_MISS
});
✅
cache: 'only-if-cached'是标准 Fetch 选项，由浏览器自动映射为Cache-Control: only-if-cached请求头。
❌ 不要手动写headers: { 'Cache-Control': 'only-if-cached' }—— Fetch 规范要求该指令必须通过cache选项控制，否则会被忽略。
2. <img>、<script></script> 等标签无法直接使用
HTML 元素不支持 only-if-cached 行为。<img src="x.jpg"> 总会尝试网络加载，无法强制“无缓存就失败”。此机制仅适用于 Fetch / XHR 等可编程请求。
3. XHR 中不可用
XMLHttpRequest 不支持 only-if-cached。它没有等效的配置项。必须用 fetch()。
✅ 典型适用场景
-
PWA 离线优先策略：Service Worker 可配合使用（例如在
fetch事件中先尝试event.request.cache = 'only-if-cached'，失败再 fallback 到网络）； - 资源预检：确认某静态资源（如配置文件、离线包 manifest）是否已缓存，避免无谓请求；
- 调试与监控：验证强缓存是否真正生效（比如部署后检查 JS 是否被长期缓存）；
- 节电/弱网兜底：在低电量或飞行模式下，避免唤醒网络模块。
⚠️ 注意事项
-
only-if-cached要求缓存响应是完整的、可复用的（含 status、headers、body），且未被标记为no-store或no-cache（即使有no-cache，只要协商缓存能返回 304，它仍算“可缓存”；但only-if-cached不走协商，所以必须是强缓存命中的 200 响应）； - 它无视
max-age=0或no-cache响应头——只要缓存条目存在且未被清除，就可能命中；但若服务端返回了Cache-Control: no-store，该响应根本不会进缓存，自然也无法被only-if-cached读取； - 不同浏览器支持度一致（Chrome、Firefox、Safari、Edge 均支持
cache: 'only-if-cached'）； - 它不能绕过 CORS 限制：若缓存响应本身不含
Access-Control-Allow-Origin，即使only-if-cached命中，fetch 仍会因 CORS 失败抛错。
不复杂但容易忽略：它不是缓存“开关”，而是一种缓存断言行为——你要的不是“尽量用缓存”，而是“没缓存就别动”。
