demo · v140

AutoPreload Mode Comparison Guide

Chrome 140 adds a browser mode to navigation preload. The browser decides what to preload based on heuristics — no manual header juggling required. Compare all three modes across network conditions.

browser

UA-driven heuristics. The browser decides what sub-resources to preload based on visit patterns. Default-safe — no configuration needed.

Best for: apps with regular navigation patterns where you want the browser to learn.

auto

Legacy default. Fires a fetch for the navigation URL in parallel with the SW startup. Fixed preload, consistent but not adaptive.

Best for: known static resources where you always want the same preload.

navigator-preload

The SW sets a custom Service-Worker-Navigation-Preload header value. The preload request exactly matches what the fetch handler would make.

Best for: fine-grained control over the preload request shape.

auto mode

—

browser mode (new)

—

navigator-preload

—
// In service-worker.js

// Enable navigation preload
self.addEventListener("activate", e => {
  e.waitUntil(self.registration.navigationPreload.enable());
});

// Set browser mode (Chrome 140+)
self.registration.navigationPreload.setHeaderValue("browser");

// In fetch handler — consume the preload response
self.addEventListener("fetch", e => {
  if (e.request.mode === "navigate") {
    e.respondWith((async () => {
      const preload = await e.preloadResponse;
      if (preload) return preload;
      return fetch(e.request);
    })());
  }
});

Which mode should I use?

1. Do you need the preload request to match your fetch handler's request exactly?

Yes → use navigator-preload with setHeaderValue() to pass hints.

2. Do you have unpredictable navigation patterns (SPA transitions, dynamic routes)?

Yes → use browser mode. The UA adapts; you don't need to model the patterns yourself.

3. Are you starting fresh with navigation preload and want the simplest setup?

Yes → use browser mode. Call enable() and setHeaderValue("browser") — done.

4. Do you have a fixed, well-known set of navigation URLs and resources?

Yes → auto mode with explicit Static Routing rules is most predictable.

Live navigationPreload state

Click the button to read the current state (requires an active service worker registration).

see also