demo · v138

Sec-Purpose: prefetch on <link rel=prefetch>

Click "trigger prefetch" — the page inserts a <link rel="prefetch"> and a service worker (registered below) captures the outgoing request headers. In Chrome 138 the fetch carries Sec-Purpose: prefetch, letting servers and SWs respond differently to speculative loads vs real navigations.

checking support…

simulated outgoing request

(click trigger)

what the server sees

(click trigger)

register the SW first to capture real headers

the code

// Document:
const link = document.createElement("link");
link.rel = "prefetch";
link.href = "/some-page";
document.head.appendChild(link);

// Server / SW:
if (req.headers.get("Sec-Purpose") === "prefetch") {
  // return a slimmer response, log it differently, etc.
}

see also