Progressive Web Apps (PWA): Native-ähnliche Web-Erlebnisse

Progressive Web Apps: Websites, die sich wie Apps anfühlen

Eine Progressive Web App (PWA) ist eine Website, die sich wie eine native mobile App verhält. Sie kann auf dem Startbildschirm Ihres Telefons installiert werden, offline arbeiten, Push-Benachrichtigungen senden und auf Gerätefunktionen zugreifen – alles ohne den Umweg über einen App-Store. PWAs vereinen das Beste aus Websites und nativen Apps.

Was eine Website zur PWA macht

Drei Dinge machen eine Website zu einer Progressiven Web App. Erstens muss sie aus Sicherheitsgründen über HTTPS bereitgestellt werden. Zweitens benötigt sie einen Service Worker – eine JavaScript-Datei, die im Hintergrund läuft, Netzwerkanfragen abfängt und Ressourcen zwischenspeichert, damit die App offline funktioniert. Drittens benötigt sie ein Web-App-Manifest – eine JSON-Datei, die dem Browser mitteilt, wie die App nach der Installation aussehen soll: ihr Name, Symbole, Startbildschirm und Anzeigemodus.

Wenn diese Anforderungen erfüllt sind, werden Browser die Benutzer auffordern, die PWA zu installieren. Auf Android erscheint sie als Vollbild-App ohne Browser-Chrome. Auf dem Desktop öffnet sie sich in einem eigenen Fenster. Die Erfahrung ist kaum von einer nativen App zu unterscheiden.

Das Offline-Erlebnis

Der Service Worker ist das Herz einer PWA. Er kann die Dateien Ihrer App beim ersten Besuch des Benutzers zwischenspeichern, sodass nachfolgende Besuche sofort geladen werden – selbst ohne Internetverbindung. Sie können verschiedene Strategien definieren: Cache-First für statische Assets, Network-First für dynamische Inhalte oder Stale-While-Revalidate für eine Balance zwischen Geschwindigkeit und Aktualität.

Das bedeutet, dass eine PWA auch dann sinnvolle Inhalte anzeigen kann, wenn der Benutzer in einem Flugzeug, einem Tunnel oder mit einer unzuverlässigen Verbindung unterwegs ist. Wenn die Verbindung zurückkehrt, kann der Service Worker im Hintergrund ausstehende Daten synchronisieren.

Push-Benachrichtigungen

Wie native Apps können PWAs Push-Benachrichtigungen senden, um Benutzer erneut anzusprechen. Die Push-Benachrichtigungs-API verwendet eine Kombination aus Service Workern und einem Push-Dienst. Der Server sendet eine Push-Nachricht an den Push-Dienst, der sie an den Browser ausliefert. Der Service Worker wird aktiv, verarbeitet die Benachrichtigung und zeigt sie an – selbst wenn die Website nicht geöffnet ist.

Wann man eine PWA entwickeln sollte

PWAs sind eine großartige Wahl für inhaltsorientierte Websites, Nachrichten-Apps, E-Commerce-Shops und jede Anwendung, bei der die Benutzererfahrung von Offline-Zugriff und schnellem Laden profitiert. Sie sind günstiger in der Entwicklung und Wartung als native Apps und benötigen keine App-Store-Genehmigung. Die Haupteinschränkung besteht darin, dass sie keinen vollständigen Zugriff auf die Gerätehardware haben – Dinge wie Bluetooth, NFC oder erweiterter Dateisystemzugriff sind im Vergleich zu nativen Apps immer noch eingeschränkt.

Viele Unternehmen haben mit PWAs beeindruckende Ergebnisse erzielt. Twitter Lite verzeichnete einen Anstieg der Seiten pro Sitzung um 65 % und einen Anstieg der gesendeten Tweets um 75 %. Pinterest baute seine mobile Website als PWA neu auf und verzeichnete einen Anstieg der Interaktion um 60 %. Diese Ergebnisse zeigen, dass PWAs kein Kompromiss sind – sie können für viele Anwendungsfälle besser sein als native Apps.