v140 · 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 auto-preload starts streaming the response before the service worker's fetch handler even runs. Significant TTFB win for cached navigations.

  2. Cold-boot Race

    Live timeline of SW bootstrap vs. network fetch with autopreload off vs. on. Dials for boot time, RTT, and whether the SW respondWith()s — see the first-byte delta land.

  3. Timing Comparator

    Three TTFB bars for cold SW, warm SW, and autopreload. Simulate each path and watch the bar shorten.

  4. Mode Picker

    The three autopreload modes — browser, manual, off — with the SW code they each imply. Click a mode and see the routing config snap into place.

  5. AutoPreload Mode Comparison Guide

    Three mode cards — auto, browser, navigator-preload — each with a "Simulate navigation" bar chart showing timing breakdown under 4G/3G/2G. A decision tree guides you to the right mode, and a live navigationPreload.getState() readout shows current configuration.

  6. Which sources the router accepts

    Every RouterSource offered to a real addRoutes call at install time, with the browser's own rejection messages — including the one that only fails because the worker has no fetch handler.

  7. What going through the handler costs

    Three files with identical contents, differing only in which router source their path is bound to. The gap between them is the cost auto-preload exists to remove, and the served-by header proves which path each request took.

  8. Racing them

    race-network-and-fetch-handler is the author-controlled version of the same trade. Sweep the worker's delay to find the crossover — and discover that the race is settled on response headers, not on completion.

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