html离线跳转空白主因是service worker未针对destination==='document'请求单独拦截并返回缓存的index.html；spa需统一fallback至index.html，且html与js资源必须同步缓存、版本一致，并启用skipwaiting()和clients.claim()确保sw及时生效。
HTML 页面离线后点链接跳转空白，不是 Service Worker 没注册，而是路由没兜住 —— 你得在 fetch 事件里专门识别 document 请求并返回缓存 HTML，否则浏览器根本不会渲染。
怎么拦截 HTML 跳转请求
用户点击 <a href="/about"></a> 或地址栏输入路径，触发的是 destination === 'document' 类型的请求，它和 script、style 不同，必须单独判断，否则缓存逻辑压根不生效。
- 错误写法：
event.respondWith(caches.match(event.request))—— 会匹配 POST、带 cookie 的请求，导致登录态丢失或表单静默失败 - 正确写法：只对
event.request.destination === 'document'做缓存优先处理，其他类型按需分流 - 注意：SPA 的 history 模式（如 React Router、Vue Router）下，所有路由都指向同一份
index.html，所以缓存时必须包含该 HTML 文件本身，不能只缓存/about这种路径（它实际不存在）
为什么缓存了 / 但 /about 离线打不开
因为 cache.addAll(['/', '/app.js']) 只缓存了根路径的 HTML，而浏览器访问 /about 时发的是新请求，caches.match() 查不到对应键 —— 缓存键是完整 URL，不是路由规则。
- 解决办法一（推荐）：服务端配置 fallback，如 Nginx 的
try_files $uri $uri/ /index.html，让所有未命中静态资源的请求都返回index.html；SW 则只缓存这个/index.html - 解决办法二（客户端兜底）：在
fetch事件中，对destination === 'document'的请求，直接caches.match('/index.html')返回，不依赖路径匹配 - 别缓存带查询参数的 HTML 路径（如
/post?id=123），这类动态路径无法预加载，也不该进 Cache API
Wouter 内存路由怎么配合 SW 离线
Wouter 默认用 useBrowserLocation，依赖 History API，离线时跳转会失败；换成 memoryLocation 后，路由状态存在内存里，不发网络请求，天然适配离线导航 —— 但前提是 HTML 和 JS 已缓存，否则页面都加载不了。
- 必须确保
sw.js中install阶段缓存了/index.html和 Wouter 相关 JS（如/node_modules/wouter/esm/index.js） -
memoryLocation不改变 URL，所以用户刷新页面仍会走destination === 'document'流程，SW 必须能返回缓存的 HTML - 不要在
memoryLocation初始化时传入服务端生成的动态路径（如path: window.location.pathname），这会导致首次加载就依赖网络
离线跳转后 JS 报错或白屏的真正原因
常见现象是控制台报 React hydration error 或 Cannot find module，表面看是框架问题，实则是 HTML 和 JS 缓存不同步：SW 返回了旧版 index.html，但里面引用的 app.a1b2c3.js 已更新，而该 JS 文件没被重新缓存。
- 每次发布新版本，必须更新
urlsToCache数组里的 JS/CSS 路径（含哈希），或改用 Workbox 的precacheAndRoute()自动生成清单 - 避免在
install事件里用fetch('/index.html')+cache.put()动态缓存 —— 首次访问时 SW 尚未激活，该请求已发出，缓存为空 - 检查 DevTools → Application → Cache Storage，确认 HTML 和它引用的所有资源都在同一个 cache 里，且时间戳一致
最易忽略的一点：skipWaiting() 和 clients.claim() 不加，新版 SW 永远不会接管已打开的页面，用户刷十次还是旧逻辑 —— 这不是缓存问题，是生命周期卡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
