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.
- 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.
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.
Service Worker und Hauptprogramm verbinden
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.
Java 22 vorgestellt: Update reduziert Boilerplate-Code
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Smartes Türschloss im Test: Nuki 4 Pro mit Thread und Matter
Smart Generator von Ecoflow im Test
Fürs Homeoffice: Elektrisch höhenverstellbare Schreibtische im Test
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Java 22 vorgestellt: Update reduziert Boilerplate-Code
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Smartes Türschloss im Test: Nuki 4 Pro mit Thread und Matter
Smart Generator von Ecoflow im Test
Fürs Homeoffice: Elektrisch höhenverstellbare Schreibtische im Test