Service-Worker-Navigation-Preload Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Service-Worker-Navigation-Preload header The Service-Worker-Navigation-Preload header is an HTTP response header which controls whether or not to use navigation preload requests in the service worker. The purpose of this header is to improve the performance of service worker controlled navigations by allowing the request to be made in parallel with the service worker startup. This allows the possibility of a faster response time for the client because the service worker does not need to be running in advance of a request for the URL that it controls.

Syntax

Service-Worker-Navigation-Preload: trueCopy

or

Service-Worker-Navigation-Preload: falseCopy

Directives

There are only two directives for the Service-Worker-Navigation-Preload header: true and false. If the value is true, navigation preload is enabled; if the value is false, navigation preload is disabled.

Examples

Enabling navigation preload:

Service-Worker-Navigation-Preload: trueCopy

Disabling navigation preload:

Service-Worker-Navigation-Preload: falseCopy

Browser Compatibility

How to modify Service-Worker-Navigation-Preload header

ModHeader is a Google Chrome extension that can be used to modify HTTP request and response headers. You can use it to modify the Service-Worker-Navigation-Preload header.

1. Launch the ModHeader extension from the toolbar.
2. Click "Add" under "Response headers".
3. Enter Service-Worker-Navigation-Preload as the header name, and true or false as the desired value.
4. Hit save.

Once this is configured, all subsequent HTTP responses will include the modified Service-Worker-Navigation-Preload header. This can be useful to test how your application behaves with or without service worker navigation preload to understand and optimize the application performance.