Service Worker Router Timing Fields

concepts

1. Router Timing Inspector

   Registers a service worker with Static Routing rules, makes fetch requests, then reads the new timing fields from PerformanceObserver entries — showing exactly which rule matched each resource.

2. Route Source Visualizer

   Visual breakdown comparing workerMatchedRouterSourceList versus workerFinalRouterSourceList — illustrating when the matched source differs from the final source (e.g. cache miss falls back to network).

3. Performance Dashboard

   A RUM-style dashboard that simulates a service worker with four Static Routing rules, fires a batch of 8 requests, and visualises which source matched and which actually served each resource — including cache misses and fallbacks — using PerformanceObserver entries.

4. Rule Builder

   Build addRoutes() rules interactively — pick a condition type (urlPattern, requestDestination, requestMethod) and a source (cache, network, fetch-event, race). The builder generates the complete install-event code and previews what workerMatchedRouterSourceList and workerFinalRouterSourceList will contain for each rule.

   Interactive Code generator

5. Cache Miss Tracker

   Simulates the key insight of the new timing fields: when a cache-source rule misses and falls back to network, workerMatchedRouterSourceList says ['cache'] but workerFinalRouterSourceList says ['network']. Adjust the cache-miss rate and race-winner probability to see the divergence across a batch of 20 simulated requests.

   Simulation Timing fields

6. Timing Field Debugger

   Select from six routing scenarios — cache hit, cache miss→network fallback, network direct, SW fetch handler, race (cache won), and no match — and inspect the exact PerformanceResourceTiming entry shape each produces, with workerMatchedRouterSourceList and workerFinalRouterSourceList highlighted. A "Probe real PerformanceResourceTiming" button reads live entries from the current page. Summary table explains every matched/final combination.

   Interactive DevTools PerformanceObserver

why it shipped

The Service Worker Static Routing API (Chrome 116+) lets developers declare routing rules so the browser can serve resources directly from cache or network without waking the service worker's JavaScript thread. Until Chrome 149, there was no way to observe which rule matched from the page side — you had to instrument the service worker itself. The new timing fields fill that observability gap: workerMatchedRouterSourceList reports which source the matched rule nominated, and workerFinalRouterSourceList reports what was actually used (they differ when a cache miss triggers a network fallback). This lets performance dashboards and RUM tools attribute latency to specific routing decisions without touching the service worker code.

references

• ChromeStatus entry
• Chrome 149 release notes
• Resource Timing Level 2 spec
• Chrome Developers — Service Worker Routing