demo · v138

Offline-capable spec prefetch

Chrome 138 lets service workers intercept speculation-rules prefetch requests. The SW can cache the prefetched response and serve it even when the network is gone — closing the last gap between speculation-rules and full offline apps.

checking support…
Simulated offline mode active. The SW cache is the only source of truth.

1. Prefetch + cache

idle
Speculation rules fire a prefetch for the next page. The SW intercepts the request, sees Sec-Purpose: prefetch, fetches it, and stores the response in Cache API.

2. Go offline

idle
Toggle the simulated offline flag. The SW will stop going to the network and serve only from cache.

3. Navigate

idle
Simulate a navigation to the prefetched URL. The SW matches it in the cache and serves the cached response — no network needed.

cache state — spec-prefetch-v1

cache empty
[--:--:--] Simulator ready. Press "Prefetch now" to begin.

request headers

Sec-Purpose—
Purpose—
Cache-Control—
X-Served-By—

the service worker code

self.addEventListener('fetch', (event) => {
  const isPrefetch = event.request.headers.get('Sec-Purpose') === 'prefetch';
  const cache = caches.open('spec-prefetch-v1');

  if (isPrefetch) {
    event.respondWith(
      fetch(event.request).then(async (res) => {
        (await cache).put(event.request.url, res.clone());
        return res;
      })
    );
    return;
  }

  event.respondWith(
    caches.match(event.request).then((cached) =>
      cached ?? fetch(event.request)
    )
  );
});

Chrome 138 is the first version where the SW fetch handler actually fires for speculation-rules prefetches. Earlier versions bypassed the SW entirely.

see also