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 层的路径匹配辅助。