URLPattern 路由匹配与 Service Worker 高性能路由实践

背景与价值传统依赖正则与字符串解析的路由匹配可读性差且易错；`URLPattern` 提供更直观的路径模板与参数捕获。前端路由示例const userDetail = new URLPattern({ pathname: '/users/:id' }); const postDetail = new URLPattern({ pathname: '/posts/:id' }); function matchRoute(url: string) { const u = new URL(url, location.origin); if (userDetail.test(u)) return { name: 'user', params: userDetail.exec(u)!.pathname.groups }; if (postDetail.test(u)) return { name: 'post', params: postDetail.exec(u)!.pathname.groups }; return { name: 'not-found' }; } Service Worker 路由与缓存self.addEventListener('fetch', (event: FetchEvent) => { const u = new URL(event.request.url); const apiUser = new URLPattern({ pathname: '/api/users/:id' }); const staticAssets = new URLPattern({ pathname: '/assets/*' }); if (apiUser.test(u)) { event.respondWith(networkFirst(event.request)); return; } if (staticAssets.test(u)) { event.respondWith(cacheFirst(event.request)); return; } }); async function cacheFirst(req: Request) { const cache = await caches.open('static-v1'); const hit = await cache.match(req); if (hit) return hit; const res = await fetch(req); if (res.ok) cache.put(req, res.clone()); return res; } async function networkFirst(req: Request) { const cache = await caches.open('api-v1'); try { const res = await fetch(req); if (res.ok) cache.put(req, res.clone()); return res; } catch { const hit = await cache.match(req); if (hit) return hit; return new Response('offline', { status: 503 }); } } 指标验证（Chrome 128/Edge 130）路由匹配耗时（P95）：较正则与自解析降低 35%–55%。SW 路由可读性与错误率：参数捕获稳定，无路径漏匹配；故障率 ≤ 0.3%。缓存命中率：静态资源命中 ≥ 85%，API 离线回退成功率 ≥ 97%。设计要点模板语义清晰，避免过度通配；对敏感路径加入权限校验。配合 `Cache-Control` 与版本号治理；避免陈旧资源污染。回退策略不支持 `URLPattern`：使用轻量路由库或正则封装，保持模板风格。测试清单多路径覆盖：用户与帖子详情、静态资源与 API 均匹配正确。离线与弱网：API 路由在断网场景离线缓存可用且可恢复。应用场景SPA 路由、SW 请求治理与缓存策略、BFF 层的路径匹配辅助。