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?
register() The register() method of the ServiceWorkerContainer interface creates or updates a ServiceWorkerRegistration for the given scriptURL . If successful, a service worker registration ties the provided script URL to a scope, which is subsequently used for navigation matching.
You register a service worker to control one or more pages that share the same origin. The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients.
“Does not register a service worker that controls page and start_url. The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.”
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With