Service-Worker-Allowed header

The HTTPService-Worker-Allowedresponse header is used to broaden the path restriction for a service worker's defaultscope.

By default, thescope for a service worker registration is the directory where the service worker script is located.For example, if the scriptsw.js is located in/js/sw.js, it can only control URLs under/js/ by default.Servers can use theService-Worker-Allowed header to allow a service worker to control URLs outside of its own directory.

A service worker intercepts all network requests within its scope, so you should avoid using overly-broad scopes unless necessary.

Header type	Response header

Syntax

http

Service-Worker-Allowed: <scope>

Directives

<scope>: A string representing a URL that defines a service worker's registration scope; that is, what range of URLs a service worker can control.

Examples

Using Service-Worker-Allowed to broaden service worker scope

The JavaScript example below is included inexample.com/product/index.html, and attempts toregister 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 theService-Worker-Allowed header set to/:

http

HTTP/1.1 200 OKDate: Mon, 16 Dec 2024 14:37:20 GMTService-Worker-Allowed: /// sw.js contents…

If the server doesn't set the header, the service worker registration will fail, as thescope option ({ scope: "/" }) requests a scope broader than the directory where the service worker script is located (/product/sw.js).