Fetch API 本身不管理缓存，需配合 Service Worker 和 Cache API 实现可控离线处理：install 阶段预缓存静态资源，fetch 事件中实现缓存优先+网络回退，API 请求按策略缓存，only-if-cached 实现纯离线模式。
Fetch API 本身不管理缓存，但可以和浏览器的 Cache API（配合 Service Worker）协同工作，实现真正可控的离线请求处理。关键不是靠 cache 选项“自动缓存”，而是用 caches.open() 手动读写缓存，并在 fetch 事件中拦截、匹配、回退。
用 Cache API 预缓存静态资源
在 Service Worker 的 install 阶段，把 HTML、CSS、JS 等核心资源存进命名缓存：
- 调用
caches.open('static-v1')创建或打开缓存区 - 用
cache.addAll(['/', '/index.html', '/app.js'])批量预加载 - 确保这些资源在首次安装时就可用，为离线打下基础
在 fetch 事件中实现“缓存优先 + 网络回退”
这是离线可用的核心逻辑：先查缓存，命中就返回；没命中再发网络请求，并把响应存入缓存供下次使用：
- 监听
self.addEventListener('fetch', ...) - 用
caches.match(event.request)查找匹配缓存项 - 若返回
response，直接return response - 否则调用
fetch(event.request)，拿到后用cache.put()存入缓存（可选）
对动态 API 请求做带策略的缓存
静态资源适合预缓存，而 API 数据更适合运行时按需缓存，并控制有效期：
立即学习“Java免费学习笔记（深入）”；
- 在 fetch 事件中判断请求 URL 是否为 API（如
/api/users） - 对 GET 类 API，先尝试
caches.match()；若命中且未过期（需自己加时间戳校验），直接返回 - 若缓存失效或不存在，则发起网络请求，成功后解析响应体，加上
date和maxAge元数据再存入缓存 - 避免无差别缓存 POST/PUT 请求，它们通常不应被复用
用 only-if-cached 实现纯离线模式
当明确只允许离线访问时（比如 PWA 地图离线包），可在 Fetch 调用中显式指定：
fetch('/api/offline-data', { cache: 'only-if-cached', credentials: 'same-origin' })- 该请求**不会触发网络**，仅从 Cache API 中查找；找不到就直接 reject
- 必须搭配 Service Worker 拦截，否则浏览器会忽略该设置
