How to register a service worker's scope one d

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

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

Answer 2

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.