Progressive Web Apps Teil 2 Service Worker

In diesem Teil geht es um den sogenannten Service Worker der Progressive Web App. Im ersten Teil haben wir anhand der Noten Beispiel App das manifest für unsere App erstellt: Zum 1. Teil

Definition von Wikipedia:

Service Worker bezeichnet eine moderne Browsertechnologie, die mittels JavaScript einen Proxy zwischen dem Webbrowser und dem Server bereitstellt, der vielfältig genutzt werden kann. Der bekannteste Einsatzzweck ist es, bestimmte Seiten auch offline verfügbar zu machen. Daneben bieten Service Worker auch die Grundlage für Push-Benachrichtigungen, progressive Web-Apps und weitere Verwendungen.

Quelle: Wikipedia (https://de.wikipedia.org/wiki/Service_Worker)

Wichtig zu erwähnen ist das der Service Worker nicht auf den DOM zugreifen kann. Ein Service Worker ist nicht zwingend durchgehend aktiv. Wenn man Daten persistent (dauerhaft) Speichern möchte sollte man diese Daten in einer IndexedDB Speichern (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)

Registrierung des Service Workers

Gist Registrierung Service Worker

Im gist wird erst geprüft ob der Browser Service Worker unterstüzt (Zeile 10). Danach wird der Service Worker registriert, dazu muss der Dateiname des Service Workers dem Browser mitgeteilt werden.

Erstellung des Service Workers

Gist Service Worker

Erläuterung der einzelnen Funktionen:

Im Service Worker selbst werden diverse event listener hinzugefügt um auf events vom Browser, der Seite selbst zu reagieren.

Zum Beispiel das Event install. Dieses wird aktiv nachdem der Service Worker installiert wurde.  

Das Event fetch wird vom Browser geworfen wenn eine Resource von unserer Seite geladen werden soll. In diesem Fall prüft unser Service Worker ob diese Resource in unserem cache liegt. Wenn ja dann geben wir die Resource aus dem Cache zurück und wenn nicht dann wird mittels fetch, das remote Objekt geladen und liegt danach im Cache. Sofern sich die Resource in unserem Beispiel im Array filesToCache befindet.

Ab jetzt sind alle Resourcen vom Array filesToCache auch offline Verfügbar. Dies können Bilder, scripte, html usw. sein.

Sofern die Anwendung Offline nur eingeschränkt funktionsfähig sein sollte dann ist es best practice. Dem Nutzer dies Mitzuteilen, welche Funktionen nicht funktionieren. Ebenso ist es ratsam dem Nutzer den Offline Status per Symbol mitzuteilen. Facebook hat diese Problematik gut gelöst, und sollte man sich einmal im Offline Modus anschauen.

Im großen und ganzen war das schon alles damit Du eine Offline fähige Seite hast. Man sollte bedenken das wenn Sich auf der Seite etwas grundlegendes ändert die Cache Versionsnummer abzuändern. Damit die neue Version der Seite auch bei den Nutzern geladen wird.