Der Scope des Services Workers wird bei der Registrierung festgelegt und kann nur unterhalb des jeweiligen Pfades liegen. Idealerweise liegt der Service Worker im Root Verzeichnis. Dieser kontrolliert somit die komplette Struktur der Applikation. In diesem Fall braucht der Scope nicht definiert werden.
Der Service Worker liegt Root Ordner und kontrolliert die komplette Application (PWA):
navigator.serviceWorker.register("serviceworker.js")Der Service Worker kontrolliert das Verzeichnis "/pwa_app", der Service Worker liegt selbst im Root Verzeichnis:
navigator.serviceWorker.register("serviceworker.js", { scope: "/pwa_app" })Bei folgendem Beispiel schlägt die Registrierung des Service Workers fehl, da der Scope nicht über dem Verzeichnis des Service Worker liegen darf. Folgende Fehlermeldung wird durch den Browser Chrome erzeugt: "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: "/" })Um zu umgehen, dass der Service Worker auch unterhalb dem Verzeichnis liegt welches man kontrolliert, hat man verschiedene je nach eingesetztem Server verschiedene Möglichkeiten. Die Herausforderung tritt dann auf, wenn man eine Progressive Web App in einem Framework oder CMS implementieren will. Unter Apache legt man eine .htaccess mit folgendem Code in den entsprechenden Ordner, bei welchem der Service Worker liegt:
<Files "serviceworker.js">
Header Set Service-Worker-allowed "/"
</Files>Durch die Registrierung mehrerer Service Worker kann man auch mehrerer Verzeichnisse separat kontrollieren.
Diese Technik setze bei beim miTT PWA Plugin ein, um eine saubere aufgeräumte Installation des CMS System Joomla zu erreichen. Der Service Worker liegt dann im Media Folder und kontrolliert je nach Einstellung den gesamten Scope. Manifiest und Service Worker transferieren die Joomla Website zu einer installierbaren Joomla App oder Wordpress App.
Haben Sie Fragen zu einer Progressiven Web App oder Service Worker, kontaktieren Sie mich.
Fragen zur Progressiven Web App?
Progressive Web App unverzichtbar für jede Webseite? Lesen Sie mehr...
WebP Bilder - neuer Speed für die Webseite Lesen Sie mehr...