HTML怎么做SW路由_HTML Service Worker路由策略方法:避坑

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"> 或地址栏输入路径，触发的是 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 永远不会接管已打开的页面，用户刷十次还是旧逻辑 —— 这不是缓存问题，是生命周期卡住了。