HTTP Headers
Service Worker Allowed
HTTP Header
The HTTP Service-Worker-Allowed response header is utilized to extend the default path restriction for a service worker’s scope.
By default, the scope of a service worker registration is limited to the directory where the service worker script resides.
For instance, if the script sw.js is located in /js/sw.js, it can control only URLs within /js/ by default.
Web servers can implement the Service-Worker-Allowed header to permit a service worker to manage URLs outside its originating directory.
A service worker intercepts all network requests within its scope; therefore, it is advisable not to set excessively broad scopes unless absolutely necessary.
Syntax
Service-Worker-Allowed: <scope>Directives
<scope>
A string representing a URL that specifies the registration scope of a service worker. It defines the range of URLs that the service worker can control, allowing it to intercept and handle fetch requests within that scope.
Example
The JavaScript example below is included in example.com/product/index.html, and attempts to register a service worker with a scope that applies to all resources underexample.com/.
navigator.serviceWorker.register("./sw.js", { scope: "/" }).then(
(registration) => {
console.log("Install succeeded, scoped to '/'", registration);
},
(error) => {
console.error(`Service worker registration failed: ${error}`);
},
);
The HTTP response to the service worker’s script resource request (./sw.js) includes the Service-Worker-Allowed header set to /:
HTTP/1.1 200 OK
Date: Mon, 16 Dec 2024 14:37:20 GMT
Service-Worker-Allowed: /
// sw.js contents…
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Service-Worker-Allowed header. This is especially useful for testing how your service worker behaves with different scope permissions during development or debugging. Steps to Modify the Service-Worker-Allowed Header:
- 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 choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Service-Worker-Allowed.
- In the “Header Value” field, enter the scope you want to allow (e.g., /app/).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-site.com/service-worker.js).
- Save the rule.
Once set up, Requestly will inject the Service-Worker-Allowed header into all matching requests, letting you test how different scope settings affect your service worker’s control over pages. Modifying the Service-Worker-Allowed header helps you control the scope your service worker can manage, which is useful when you want your service worker to handle a broader or narrower range of URLs without changing your server setup. This can save time and make testing easier.
Table of Contents
- No headings found.
