Service-Worker-Navigation-Preload
General Summary
Section titled “General Summary”A request header sent in preemptive request to fetch() a resource during service worker boot. The value, which is set with NavigationPreloadManager.setHeaderValue(), can be used to inform a server that a different resource should be returned than in a normal fetch() operation.
Detailed Description
Section titled “Detailed Description”The Service-Worker-Navigation-Preload HTTP header is a specialized field used to a request header sent in preemptive request to fetch() a resource during service worker boot. The value, which is set with NavigationPreloadManager.setHeaderValue(), can be used to inform a server that a different resource should be returned than in a normal fetch() operation. It acts as a signaling mechanism between the client and the server to enforce policies, negotiate capabilities, or provide telemetry data during the transmission of requests and responses.
Use Cases (When, Why, and How)
Section titled “Use Cases (When, Why, and How)”When to Use It
Section titled “When to Use It”This header is primarily utilized when the client or browser needs to declare its context or capabilities prior to establishing the transaction. Modern web applications rely on this to maintain state and context.
Why to Use It
Section titled “Why to Use It”It facilitates seamless programmatic integration by ensuring both the client and server agree on the terms of the transaction, greatly improving performance, security, and rendering correctness without manual user intervention.
How to Use It
Section titled “How to Use It”Implement or parse this header within your application’s network layer (such as an Express middleware or a Next.js edge function) by reading or attaching the key-value pair:
Service-Worker-Navigation-Preload: <appropriate-value>Example
Section titled “Example”Service-Worker-Navigation-Preload: <value>