demo · v138
Sec-Purpose inspector
When a SW intercepts a speculation-rules prefetch, the request.headers includes Sec-Purpose: prefetch. That's the canonical way to distinguish real navigations from speculative ones inside the SW. This tool registers a SW that inspects the header and routes accordingly.
Unflagged in Chrome 138. The fetch event handler sees the prefetch request. To register the SW: click "install SW" below. The SW emits
postMessages for every intercepted request, classified by Sec-Purpose.
probing SW + speculation rules…
0speculative requests intercepted (Sec-Purpose: prefetch)
0regular requests (no Sec-Purpose)
Live SW log (postMessage stream)
The handler shape
self.addEventListener('fetch', (event) => {
const purpose = event.request.headers.get('Sec-Purpose');
if (purpose === 'prefetch') {
// it's a speculation-rules prefetch
event.respondWith(fetch(event.request)); // pass through, or rewrite
// emit telemetry, skip analytics, add an auth header, etc.
return;
}
// normal navigation / subresource — route through your usual cache strategy
event.respondWith(caches.match(event.request).then(r => r || fetch(event.request)));
});
What's happening
- The page declares a speculation rule pointing at a "/echo" path that returns a small JSON blob.
- The SW intercepts both speculative prefetches and the real navigation. Each request is inspected for the
Sec-Purposeheader. Sec-Purpose: prefetchidentifies a speculative request. The SW posts a message back to the page with the URL and full header set.- Use cases: skip server-side analytics, attach a debug query param, route to a regional cache, or bail out of expensive subresource resolution.