service worker能从根本上缓解spa路由切换白屏问题，通过预缓存首屏html、主js、核心css等关键资源，在install阶段完成缓存；对导航请求采用stale-while-revalidate策略，优先返回缓存并后台更新；启用navigation preload消除冷启动延迟；配合wouter等内存路由进一步提升离线与弱网下的切换平滑性。
单页应用（SPA）在路由切换时出现白屏、卡顿或短暂加载延迟，本质是客户端等待新页面资源（HTML、JS、CSS）从网络加载完成所致。Service Worker 能从根本上缓解这个问题——它不改变路由逻辑，而是接管资源获取过程，让“切换”变成“读取本地缓存”，从而抹平网络抖动。
预缓存首屏与关键路由资源
用户首次访问时没有缓存，后续切换才可能快。因此必须在 Service Worker 的 install 阶段主动缓存核心资产：
- 首页 HTML（如
/index.html或/app-shell.html），作为所有路由的容器 - 主入口 JS（如
/main.[hash].js）、核心 CSS 和图标等静态资源 - 若使用 Wouter 等内存路由，可额外缓存各路由对应的组件模块（需构建时生成明确路径）
- 注意：避免缓存带动态参数的 URL（如
/user/123），它们更适合运行时缓存
对导航请求启用 Stale-While-Revalidate 策略
当用户点击链接触发路由跳转（即浏览器发起 destination: 'document' 的 fetch 请求），Service Worker 应立即返回缓存内容，同时后台静默更新：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 用
new URL(event.request.url)判断是否为页面导航请求 - 调用
caches.match(event.request)尝试命中缓存；命中则直接返回 - 无论是否命中，都调用
fetch(event.request)发起网络请求 - 新响应到达后，用
response.clone()分别送回页面和写入缓存，避免流被消费一次就失效
启用导航预加载（Navigation Preload）
Service Worker 启动有冷启动延迟，尤其首次安装后第一次导航容易卡住。导航预加载让浏览器在 SW 初始化的同时并发请求资源：
- 注册时调用
registration.navigationPreload.enable() - 在
fetch事件中优先检查event.preloadResponse - 若存在预加载响应，直接返回；否则回落到 Stale-While-Revalidate 流程
- 该机制已在 Chrome、Edge、Firefox 和 Safari 11.3+ 中稳定支持
配合内存路由减少对 History API 的依赖
Wouter 的 memoryLocation 可让 SPA 在离线或弱网下维持内部路由状态，不依赖浏览器地址栏同步。这意味着：
- 即使
fetch失败，UI 仍能基于内存状态渲染对应视图（如显示“正在重试”或缓存内容） - 配合 Service Worker 缓存的 HTML 和 JS，整个 SPA 实际上可在无网络时持续交互
- 无需强制刷新或跳转，路由切换完全由 JS 控制，更可控、更平滑
