Cache First策略核心是优先从Cache API读取资源，命中则返回，未命中再网络请求并缓存响应；适用于HTML、CSS、JS等静态资源，提升离线体验与首屏速度。
Cache First 策略的核心是：**优先从 Cache API 中读取资源，命中则直接返回；未命中再发起网络请求，并将响应存入缓存供后续使用**。它适合静态资源（如 HTML、CSS、JS、图标等），能显著提升离线体验和首屏加载速度。
注册 Service Worker 并监听 fetch 事件
必须在页面加载时注册 Service Worker，并在其内部拦截网络请求：
- 确保主页面通过
navigator.serviceWorker.register('/sw.js')注册，且sw.js与页面同源、位于根路径或合理 scope 下 - 在
sw.js中监听fetch事件，对匹配的请求执行 Cache First 逻辑 - 注意：只对 GET 请求做缓存，避免缓存 POST/PUT 等非幂等请求
打开缓存并尝试匹配缓存项
使用 caches.open() 打开指定缓存空间，再用 cache.match(request) 查找匹配的响应：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 建议为不同资源类型（如 'static-v1'、'html-pages'）创建独立缓存名，便于版本管理和清理
-
match()默认精确匹配 URL 和 method，若需忽略 URL 参数或支持正则匹配，可传入{ ignoreSearch: true }或自行解析 request.url - 若
match()返回非 undefined 响应，直接return response.clone()（避免流被消费两次）
缓存未命中时回退网络并写入缓存
当缓存无匹配时，发起 fetch(request)，成功后将响应克隆并存入缓存：
- 务必先
response.clone()，因为 Response body 是一次性流，不能被读取两次 - 使用
cache.put(request, responseClone)存入缓存——注意：request 必须是 Request 实例（不是字符串），否则会报错 - 建议加 try/catch 包裹 fetch 和 put 操作，防止网络失败或存储异常导致整个请求失败
- 对 HTML 页面可额外设置
ignoreVary: true（如cache.match(req, { ignoreVary: true })），避免因 Vary 头导致重复缓存
缓存更新与版本控制
Cache First 不等于“永不更新”，需主动管理缓存生命周期：
- 每次发布新版本时，修改缓存名（如从 'static-v1' → 'static-v2'），并在 install 阶段预缓存关键资源
- 在 activate 事件中调用
caches.keys().then(keys => keys.filter(...).map(k => caches.delete(k)))清理旧缓存 - 对 HTML 文件，可结合 ETag 或 Last-Modified 做条件请求，或在 fetch 中对 HTML 单独采用 Stale-While-Revalidate 策略，兼顾新鲜度与可用性
