Tutorial: Progressive Web Apps mit Workbox, Teil 3

Wer Progressive Web Apps komplett offline betreiben möchte, muss das Herzstück der Anwendung richtig konfigurieren: den Service Worker.

Lesezeit: 6 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen
Tutorial: Progressive Web Apps mit Workbox, Teil 3
Von
  • Steffen Jahr

Man ist unterwegs, öffnet eine Webanwendung und kann sie nicht ausführen: Es besteht keine oder nur eine unzureichende Verbindung zum Server. Wer wie im zweiten Teil der Serie beschrieben seine Progressive Web App (PWA) auf dem Home-Bildschirm des Smartphones abgelegt hat, könnte annehmen, dass sie nun ohne Internetanbindung funktioniert. Leider trifft das nicht zu, der Entwickler muss die PWA weiter anpassen. Denn noch immer handelt es sich um eine Webanwendung, auch wenn sie nicht mehr so aussieht. Ohne Internetverbindung gibt es eine Fehlermeldung. Dieser Teil beschreibt, wie sich die Anwendung offline nutzen lässt. Eine vom Internet unabhängige Progressive Web App zum Empfangen von Push-Nachrichten liegt als Demo auf GitHub.

Google Chrome bietet zur Überbrückung von Offlinezeiten ein Minispiel an.

Damit die Anwendung offline arbeiten kann, muss sie inklusive aller notwendigen Daten auf dem Client liegen. Hierbei hilft der Service Worker, das Herzstück jeder PWA. Er ist dafür zuständig, Push-Nachrichten zu empfangen, sie anzuzeigen, die Anwendung offline bereitzustellen und sie mit Updates aktuell zu halten. Beim Service Worker handelt es sich um eine eigene kleine Applikation, die neben der eigentlichen Anwendung werkelt und ihre Aufgaben im Hintergrund erledigt. Sie läuft in einem eigenen Thread, damit das Hauptprogramm bei Schwierigkeiten nicht in Mitleidenschaft gezogen wird. Das bedeutet aber auch, dass es die grafischen Komponenten nicht direkt steuern kann.

Allerdings gibt es die Möglichkeit, die beiden Komponenten über ein Nachrichtensystem kommunizieren zu lassen. Die Anwendung darf dann das User Interface auf Anweisung des Service Workers aktualisieren. Dieser besteht aus einer JavaScript-Datei, die der Entwickler in der Hauptanwendung registriert:

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 12,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+