mittl medien | Webentwicklung in Stuttgart

Der Scope des Service Workers
(Progressive Web App - PWA)

Der Scope wird bei der Registrierung des Service Worker definiert - der Scope gibt an von welchem Verzeichnis die Requests der Progressiven Web App kontrolliert werden

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.

Haben Sie Fragen zu einer Progressiven Web App oder Service Worker, kontaktieren Sie mich.

Progressive Web App unverzichtbar für jede Webseite? Lesen Sie mehr...

WebP Bilder - neuer Speed für die WebseiteLesen Sie mehr...