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

问题

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/".

<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?

回答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.

回答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

来源：https://stackoverflow.com/questions/35358038/how-to-register-a-service-workers-scope-one-directory-above-where-the-service-w

标签

javascript

scope

service-worker