Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding Service Worker scope

I am trying to implement a Service Worker in a test page. My end goal is an application that operates offline. The folder structure is below

/myApp   ...   /static     /mod       /practice         service-worker.js         worker-directives.js         foopage.js   /templates     /practice       foopage.html 

I am registering a service worker as shown below (within service-worker.js):

navigator.serviceWorker.register('../static/mod/practice/service-worker.js').then(function(reg) {     console.log('Registration succeeded. Scope is ' + reg.scope);     ... } 

and in the console I see

Registration succeeded. Scope is https://example.com/static/mod/practice/

If my page is located at https://example.com/practice/foopage, do I need to make sure that my service worker scope is https://example.com/practice/foopage?

If I try to define the scope in the register function call like

navigator.serviceWorker.register('../static/mod/practice/service-worker.js', { scope: '/practice/foopage/' }).then(function(reg) {     ... } 

I get the error

Registration failed with SecurityError: Failed to register a ServiceWorker: The path of the provided scope ('/practice/foopage/') is not under the max scope allowed ('/static/mod/practice/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope. 

Question is: What exactly does scope refer to? Is it the collection of URLs that the service worker will eventually control? Do I need to move service-workers.js somewhere else? If so, where?

like image 644
Brian Leach Avatar asked Mar 03 '16 18:03

Brian Leach


People also ask

What is the role of service worker?

A service worker is responsible for assisting the community welfare development by providing social services to an organization or specific individual groups, supporting their needs, and addressing their community concerns.

What is service worker and how it works?

Service workers are specialized JavaScript assets that act as proxies between web browsers and web servers. They aim to improve reliability by providing offline access, as well as boost page performance.

What is a service worker?

Service worker may refer to: Social service worker, a person engaged in social work. Pink-collar worker, a person in the service industry whose labour is related to customer interaction, entertainment, sales or other service-oriented work.

Can you change scope of service worker?

Since a service worker can't have a scope broader than its own location, only use the scope option when you need a scope that is narrower than the default. The following code, if included in example.com/index.html , at the root of a site, would only apply to resources under example.com/product .


1 Answers

Service workers are basically a proxy between your web application and the internet, so it can intercept calls to the network if so desired.

Scope in this instance refers to the path that the service worker will be able to intercept network calls from. The scope property can be used explicitly define the scope it will cover. However:

Service workers can only intercept requests originating in the scope of the current directory that the service worker script is located in and its subdirectories. Or as MDN states:

The service worker will only catch requests from clients under the service worker's scope.

The max scope for a service worker is the location of the worker.

As your service worker is located in /static/mod/practice/, it's not allowed to set its scope to /practice/foopage/. Requests to other hosts, e.g. https://stackoverflow.com/foo, can be intercepted in any case.

The easiest way to ensure that your service worker can intercept all the calls it needs to, would be to place it in the root directory of your web app (/). You can also override the default restrictions using an http header and manually setting the scope (see Ashraf Sabry's answer).

like image 152
nils Avatar answered Oct 05 '22 03:10

nils