HTTP Headers
Service Worker Navigation Preload
HTTP Header
The HTTP Service-Worker-Navigation-Preload request header indicates that the request was initiated by a fetch operation during service worker navigation preloading.
It enables a server to respond with a different resource compared to a typical fetch request.
If a different response may be returned based on this header, the server should include a Vary: Service-Worker-Navigation-Preload header in its responses to ensure proper caching behavior.
For further details, refer to NavigationPreloadManager.setHeaderValue() and NavigationPreloadManager.
Syntax
Service-Worker-Navigation-Preload: <value>Directives
<value>
An arbitrary value that specifies the data to be sent in response to a preload request. Typically, it defaults to true. This value can be customized within the service worker context by using NavigationPreloadManager.setHeaderValue().
Example
The following request header is sent by default in navigation preload requests:
Service-Worker-Navigation-Preload: trueThe service worker can set a different header value using NavigationPreloadManager.setHeaderValue().
For example, in order to request that a fragment of the requested resource be returned in JSON format, the value could be set with the string json_fragment1.
Service-Worker-Navigation-Preload: json_fragment1How to Modify Header using Requestly
Requestly is a handy Chrome extension that lets you modify HTTP headers, including the Service Worker Navigation Preload header. This helps you test and debug how your service worker handles navigation preload requests by customizing the headers sent with those requests. Steps to Modify Service Worker Navigation Preload Header using Requestly:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and select “Modify Headers” as the rule type.
- Add a new header modification:
- Under “Action”, choose “Add” or “Override”.
- In the “Header Name” field, enter Service-Worker-Navigation-Preload.
- In the “Header Value” field, enter the desired value (e.g., enabled or any custom value you want to test).
- Set the URL condition: Specify the URL or pattern where this header change should apply (for example, https://your-site.com/*).
- Save the rule.
After applying the rule, Requestly will modify the Service Worker Navigation Preload header for matching navigation requests, helping you test how your service worker behaves under different header conditions. Modifying this header is useful because it allows you to control or simulate how navigation preload requests are handled by your service worker. This can help improve performance and troubleshoot issues related to how content is loaded during navigation.
Table of Contents
- No headings found.
