Steffen Jahr Thinktecture AG

Für Nutzer von Google Chrome und Mozilla Firefox bietet das Cachen der Anwendung mittels des Service Workers eine sinnvolle und einfache Möglichkeit, die User Experience der Anwendung durch schnelle Ladezeiten deutlich zu verbessern.

Wer kennt ihn nicht, den kleinen Dinosaurier, der erscheint, wenn eine Webseite nicht erreichbar ist. Er soll einem die Zeit vertreiben, bis die Verbindung zum Netzwerk wiederhergestellt werden kann. Doch ist dies heute wirklich noch nötig? Die Antwort auf diese Frage ist ein klares Nein. In diesem ersten Teil der Miniserie zur Offlinefähigkeit von Webanwendungen werden wir sehen, wie man mittels des Service Workers Anfragen an das Netzwerk cachen und somit seine Anwendung offline halten kann.

Seit geraumer Zeit steht mit dem Service Worker ein API zur Verfügung, das die Möglichkeit bietet, seine Webanwendung durch Cachen von Netzwerkanfragen und deren Antworten offline verfügbar zu machen. Die Anforderung nach Offlinefähigkeit ist jedoch nicht neu, erlebt aber durch das Interesse an Progressive Web Apps (siehe Artikel im PHP Magazin 4.17) derzeit einen Aufschwung.

Artikelserie

Teil 1: Service Worker: der Turbo für die eigene Webanwendung

Teil 2: Dynamische Inhalte einer Applikation sinnvoll offline halten

Der Service Worker ist eine JavaScript-Anwendung, die im Hintergrund parallel zur eigentlichen Webanwendung läuft. Hierfür bedient sie sich eines eigenen Threads, um bei aufwendigen Operationen die Hauptanwendung nicht zu blockieren. Der Code des Service Workers liegt in einer bzw. mehreren eigenen Dateien. Damit der Service Worker arbeiten kann, muss er installiert werden. Hierfür ist notwendig, dass die Anwendung über HTTPS erreichbar ist. Einzige Ausnahme ist hier die Entwicklung unter localhost. Um einen Service Worker zu installieren, muss in der Webanwendung die JavaScript-Datei des Service Workers registriert werden:

window.navigator.serviceWorker.register('serviceWorker.js');

Durch den Aufruf von register() wird dem Browser mitgeteilt, dass unter dem angegebenen URL ein Service Worker zur Verfügung steht. Der Service Worker selbst arbeitet eventbasiert. Das bedeutet, dass man sich innerhalb dieses Service Workers auf verschiedene Events registriert und auf diese reagiert.

Circle of Life

Jeder Service Worker durchläuft ab der Installation einen Lebenszyklus, der verschiedene Zustände bereithält (Abb. 1):

  • Parsed: Die JavaScript-Dateien des Service Workers wurden geparst und sind fehlerfrei.
  • Installing: Der Service Worker wird gerade installiert.
  • Error: Dieser Zustand tritt auf, wenn der Service Worker nicht installiert werden kann, oder wenn während der Installation ein Fehler auftritt.
  • Activated: Die Installation des Service Workers ist abgeschlossen.
  • Idle: Keines der registrierten Events wird aufgerufen und der Service Worker wartet auf neue Events.
  • Fetch: Der Service Worker agiert als Proxy zwischen Anwendung und Netzwerk und überwacht Anfragen an das Netzwerk.
  • Terminated: Der Service Worker wird nicht weiter benötigt und wurde beendet.

Abb. 1: Service-Worker-Lebenszyklus

Der Service Worker kann sich auch auf die Events seines eigenen Lebenszyklus – beispielsweise install oder activate – registrieren. Das ist z. B. dann notwendig, wenn bei der Installation des Service Workers Dateien im Cache abgelegt werden sollen. Hierzu aber später mehr.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 6.17 - "React"

Alle Infos zum Heft
579810577Besseres Cachen mit der Hilfe von Service Workers
X
- Gib Deinen Standort ein -
- or -