cache api 的 caches.open() 和 cache.put() 必须在 service worker 中使用，需通过 https 注册 sw.js，caches.open() 要 await 获取缓存实例，cache.put() 需传入已 fetch 的 response 且注意 request 克隆。
Cache API 的 caches.open() 和 cache.put() 必须在 Service Worker 环境中使用，不能直接写在页面的 <script></script> 里。关键不是“能不能调用”，而是“在哪调、怎么配、怎么写才真正生效”。
必须先注册并激活 Service Worker
页面需通过 HTTPS（或 localhost）运行，并执行注册：
-
navigator.serviceWorker.register('/sw.js')—— 脚本路径必须是根相对路径，且与页面同源 -
sw.js文件响应头需含Content-Type: text/javascript - 注册后不会立即接管当前页，要在
activate事件中加self.clients.claim()才能生效 -
file://协议下完全不可用，调试务必用本地服务器（如 VS Code Live Server 或npx serve）
caches.open()：打开缓存空间的正确姿势
它返回 Promise，必须 await 或 .then() 处理；名称建议带版本号，便于后续更新清理：
-
const cache = await caches.open('static-v2')—— 名称可自定义，如'images-v1'、'api-cache' - 不要写成
caches.open('static-v2').then(cache => { ... })后直接往下写同步逻辑，容易因异步时序出错 - 多个缓存可共存，互不影响，适合按类型或版本隔离资源
cache.put()：存入请求-响应对的核心要点
它不自动发起请求，必须你提供一个已 fetch 到的 Response 对象；常见错误是直接传 URL 或未克隆 Request：
- ✅ 正确写法：
await cache.put(request, await fetch(request)) - ❌ 错误写法：
await cache.put('/style.css', fetch('/style.css'))—— 第二个参数不是 Response，而是 Promise - ⚠️ 注意 Request 复用：同一个 Request 对象只能读一次 body。若先
cache.match(request)再fetch(request)，会报 “Request has already been read” - ✅ 安全做法：用
request.clone()分开使用，例如：cache.match(request).catch(() => fetch(request.clone()))
典型安装阶段缓存示例（install 事件中）
预缓存静态资源时，推荐用 cache.addAll()，但它内部本质就是多次 put()；若需精细控制（比如缓存非 200 响应），才显式用 put()：
- 路径必须是根相对路径，如
'/index.html'，不能写'./index.html'或'index.html' - 所有资源必须是 GET 请求，且服务端支持 CORS（跨域资源需带
Access-Control-Allow-Origin） - 任一资源 404 或跨域失败，
addAll()整体失败，缓存为空 —— 所以建议配合event.waitUntil()并做 try/catch
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
