PWA离线时动态内容不可用，因cache.addAll()仅缓存静态快照，无法处理HTML内联JS、API请求及服务端渲染的实时数据；须改用fetch事件拦截+mock响应、本地暂存+同步、分层降级策略。
动态内容在离线状态下不可用是 PWA 最常见的幻觉——cache.addAll() 缓存的只是静态快照，而 HTML 里 fetch('/api/user')、document.getElementById('time').innerText = new Date() 这类行为，离线时必然失败。真要让动态内容“可用”，得放弃“缓存整个页面”的思路，转为分层控制：哪些数据可预存、哪些必须降级、哪些干脆不显示。
为什么 cache.addAll() 对动态 HTML 完全无效
cache.addAll() 只管资源是否能被 fetch() 成功拉下来，不管它里面写了什么逻辑。一个 SSR 渲染的 /dashboard.html，如果服务端返回时带了 Cache-Control: no-store，它连缓存都进不去；就算缓存成功，里面内联的 JS 仍会尝试发起网络请求，离线时直接报 net::ERR_FAILED。
- 动态 HTML（如 Next.js SSR 页面、PHP 渲染页）通常带时间戳、用户态、实时计数器，这些值离线时无法刷新
- 浏览器不会执行 HTML 里的 JS 来“重渲染”，只按缓存那一刻的 DOM 呈现
- 若 HTML 中
<script src="/data.js"></script>被漏进urlsToCache，离线访问时脚本加载失败，整个交互逻辑就断了
用 fetch 事件 + fallback 页面兜底真实请求
真正可行的做法，是在 Service Worker 的 fetch 事件中识别出 API 请求，并返回预置的模拟响应或缓存副本，而不是指望 HTML 自己“活”过来。
- 对
request.destination === 'document'的请求，始终返回已缓存的/offline.html或预渲染的骨架页（避免白屏） - 对
request.url.includes('/api/') || request.destination === 'json'的请求，用caches.match()查找上次成功缓存的响应；没命中则返回一个 JSON 格式的默认数据（如{status: "offline", data: []}） - 关键点：在 install 阶段用
cache.put()手动存入一份离线可用的 mock 数据，例如：cache.put(new Request('/api/latest'), new Response(JSON.stringify(mockData), {headers: {'Content-Type': 'application/json'}}))
前端状态管理必须支持离线写入与同步
用户在离线时点击按钮、填写表单、切换开关——这些操作不能丢，但也不能立刻发请求。需要本地暂存，并在网络恢复后自动重放。
- 用
localStorage或IndexedDB记录待同步的操作队列，结构类似：{type: 'POST', url: '/api/submit', body: {...}, timestamp: Date.now()} - Service Worker 激活后监听
online事件，触发同步逻辑；或在页面里轮询navigator.onLine，调用自定义 sync 函数 - 避免在页面卸载前（
beforeunload）做异步写入，因为浏览器可能直接终止 JS 执行；改用navigator.sendBeacon()发送小量确认数据
最易被忽略的一点：所谓“动态内容可用”，从来不是指“和在线时一模一样”，而是明确界定哪些字段允许 stale（比如用户头像可缓存 24 小时）、哪些操作必须阻塞（比如支付提交）、哪些 UI 必须降级为只读。没有这种分层契约，所有离线方案都会在第一次真实用户操作时崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
