pwa离线缓存核心是service worker拦截请求+cache api管理资源；预缓存骨架资源于install事件，fetch阶段采用缓存优先策略，配合manifest.json实现完整pwa体验，并在activate事件中清理旧缓存。
核心是用 Service Worker 拦截请求 + Cache API 管理资源，让页面断网时仍能打开、加载快、内容不空白。
预缓存关键骨架资源
在 Service Worker 的 install 事件中，把 HTML、CSS、JS、图标等首次访问必需的静态文件提前存入缓存。这些资源构成页面“骨架”，缓存后离线也能渲染主界面。
- 缓存名称建议带版本号（如 'pwa-cache-v2'），便于后续更新时清理旧缓存
- 所有路径必须是相对根路径或绝对 URL，且同源；caches.addAll() 失败会导致安装失败，列表需精简可靠
- 常见预缓存项：['/', '/index.html', '/app.js', '/style.css', '/icons/icon-192.png']
fetch 阶段实现缓存优先策略
每次网络请求触发 fetch 事件时，先查缓存；命中则直接返回，没命中再发网络请求，并可选地把响应存入缓存。
- 对 HTML 和核心静态资源用 Cache First：优先保障可用性，哪怕内容稍旧
- 对 API 数据建议用 Network Falling Back to Cache 或 Stale-while-revalidate：先返回缓存数据防卡顿，再后台拉新数据更新缓存
- 可为不同资源类型设置不同策略，比如图片走网络优先+缓存回退，避免首次加载空白
配合 manifest.json 构建完整 PWA 体验
离线缓存只是基础，完整 PWA 还需 manifest.json 支持：
- 定义 name、short_name、icons（至少含 192×192 和 512×512 PNG）、start_url 和 display: 'standalone'
- 设置 theme_color 和 background_color 控制启动画面和状态栏颜色
- 确保该文件通过 HTTPS 提供，并在 HTML 中用 引入
管理生命周期，避免缓存 stale 或失效
Service Worker 更新不是自动覆盖，需主动处理旧缓存和旧 SW：
- 在 activate 事件中遍历 caches.keys()，删除不再使用的缓存名（如旧版本 cache）
- 调用 self.skipWaiting() 让新 SW 立即激活，避免等待旧 SW 完成所有 fetch
- 注册时加 clients.claim()（可选），让新 SW 立即控制当前页面
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
