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.
This technique is used in the miTT PWA plugin to achieve a clean and tidy installation of the Joomla CMS system. The service worker is located in the media folder and controls the entire scope depending on the settings. The Manifiest and Service Worker transfer the Joomla website to an installable Joomla App or Wordpress App.
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...