v131 · service worker

ServiceWorkerAutoPreload browser mode

**ServiceWorkerAutoPreload** is a mode where the browser issues the network request in parallel with the service worker bootstrap. If the fetch handler returns the response with `respondWith()`, the browser consumes the network request result inside the fetch handler. If the fetch handler result is fallback, it passes the network response directly to the bro

concepts

  1. SW Autopreload

    Browser-mode SW autopreload starts streaming before the SW handler runs. Significant TTFB win.

  2. With vs without timeline

    Side-by-side swim-lanes of SW boot, fetch handler, and network — see exactly when auto-preload overlaps work.

  3. Cache vs network race

    Whichever leg returns first wins the TTFB. Slider tunes network and cache latencies — watch the winner flip.

  4. Opt-in lifecycle probe

    Register the SW, see browser-mode signals (navigationPreload, controller state) and learn how to actually enable it.

why it shipped

The ServiceWorker’s fetch handling capability allows developers to intercept and control the resource fetch requests via “fetch” event handler. This enables web apps to be reliable even while offline and delivers faster loading experiences by using its own CacheStorage. However, the cost of starting up a ServiceWorker can be non-negligible. ServiceWorker fetch handlers are invoked during the critical path for navigation and subresource loading. Developers are sometimes using fetch handlers to speed up page loading but the fetch handlers may slow down page loading if the ServiceWorker is not ru

references