Account
mittl medien | Webentwicklung in Stuttgart

The Scope of the Service Worker
(Progressive Web App - PWA)

The scope is defined during the registration of the Service Worker - the scope specifies from which directory the requests of the Progressive Web App are controlled

The scope of the Services Worker is defined during registration and can only be below the respective path. Ideally, the Service Worker is located in the root directory. This controls the complete structure of the application. In this case, the scope does not need to be defined.

The service worker is located in the root folder and controls the complete application (PWA):

 navigator.serviceWorker.register("serviceworker.js")

The Service Worker controls the directory "/pwa_app", the Service Worker itself is in the root directory:

navigator.serviceWorker.register("serviceworker.js", { scope: "/pwa_app" })

In the following example, the registration of the service worker fails because the scope must not be above the service worker's directory. The following error message is generated by the Chrome browser: "The path of the provided scope ('/') is not under the max scope allowed ('/.../.../pwa/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.""

 navigator.serviceWorker.register("plugin/serviceworker.js", { scope: "/" })

To avoid that the Service Worker is also located below the directory you are controlling, you have different options depending on the server you are using. The challenge arises when you want to implement a progressive web app in a framework or CMS. Under Apache you place a .htaccess with the following code in the appropriate folder where the Service Worker is located:

 <Files "serviceworker.js"> 
      Header Set Service-Worker-allowed "/"
 </Files>

By registering multiple service workers you can also control multiple directories separately.

If you have questions about a Progressive Web App or Service Worker, please contact me.

Progressive Web App indispensable for any website? Read more...

WebP images - new speed for the website Read more...