How to register a service worker's scope one directory above where the service_worker.js is located

Question

MY directories are as follows.

public_html/
sw/

The "sw/" is where I want to put all service workers, but then have those service workers with a scope to all the files in "public_html/".

JS

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw/notifications.js', { scope: '../sw/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
};
</script>

How do I allow this sort of scope?

Answer 1

The max scope for a service worker is where it is located . This means you can not register one service worker located at /sw/ in scope: '/public_html/' unless you include a special header Service-Worker-Allowed set to the new max scope for your service worker.

Summarizing, if you can add this header when serving the service worker, set it as follows:

Service-Worker-Allowed: /public_html/

If not, you must place the sw at some location above the scope.

Answer 2

Edit: As Salva's answer indicates, the max scope must be widened with the Service-Worker-Allowed header to allow the following to succeed.

---

Change the scope property of the registration options object (the second parameter of navigator.serviceWorker.register() ) to the URL you would like the service worker to be scoped to. In your case, this may be ../public_html .

// ...
navigator.serviceWorker.register('sw/notifications.js', { scope: '../public_html/' })
// ...

---

That parameter will default to ./ (relative to the ServiceWorker script) if the options object is not provided, or has no scope property.

Also, setting a scope with any origin other than the current origin will reject the registration Promise with a SecurityError exception.

---

References:

https://www.w3.org/TR/service-workers/#navigator-service-worker-register

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameters