demo · v151

Race Strategy Visualizer

The most subtle Service Worker Router source — race-network-and-fetch-handler — fires both paths and accepts whichever finishes first. Slide the cache and network latencies and watch matchedRouterSource and finalRouterSource diverge.

Simulator. The page mirrors the rendering Chrome would do for the Resource Timing entry — it doesn't register a service worker. Real values come from performance.getEntriesByType('resource') in a production app.

strategy

conditions

cache hit time

14 ms

network time

120 ms

fetch handler

60 ms

cache miss?

network offline?

timeline

cache lookup

—

network

—

fetch handler

—

resource timing entry

code

// The router rule that produces the race source:
self.addEventListener("install", () => {
  self.registration.addRoutes([
    {
      condition: { urlPattern: { pathname: "/api/*" } },
      source: "race-network-and-fetch-handler",
    },
  ]);
});

// In the main thread, observe the resolved source:
new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    console.log(e.name,
      "matched:", e.workerMatchedRouterSource,
      "final:",   e.workerFinalRouterSource);
  }
}).observe({ type: "resource", buffered: true });

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗