Progressive Web App (PWA, Technik)

Definition: Eine Progressive Web App (PWA) ist eine normale Webanwendung, die durch den Einsatz von drei technischen Bausteinen – HTTPS, Service Worker und Web App Manifest – nativ-ähnliche Fähigkeiten erhält: Offline-Betrieb, Push-Benachrichtigungen und Installation auf dem Startbildschirm ohne App Store. Der Begriff «progressiv» bedeutet: die App funktioniert in allen Browsern als normale Website, bietet aber erweiterte Features für Browser mit PWA-Unterstützung. PWAs teilen die Reichweite des Webs (eine URL, kein App-Store-Download, instant zugänglich) mit dem Engagement-Vorteil nativer Apps (Icon auf Startbildschirm, Vollbild-Darstellung, Offline-Fähigkeit). Führende E-Commerce-Unternehmen (Alibaba, Flipkart, Starbucks) berichten nach PWA-Einführung von 30–100 % Steigerungen bei Engagement-Metriken.

Erläuterung

PWA ist kein Framework oder Tool – es ist eine Sammlung von Web-APIs. Service Worker sind der technische Kern: Sie laufen als separater Thread, können Netzwerkanfragen abfangen und cachen, und ermöglichen damit Offline-Betrieb. Das Web App Manifest ist eine JSON-Datei die Name, Icons und Darstellungsmodus definiert und Browser zur «Add to Homescreen»-Aufforderung berechtigt.

Technische PWA-Bausteine

Service Worker: JavaScript-Datei die in eigenem Thread außerhalb des Hauptthreads läuft; registriert via navigator.serviceWorker.register('/sw.js'); kann Fetch-Events abfangen: Cache-First, Network-First oder Stale-While-Revalidate-Strategien; persistent über Seitenladevorgänge hinaus; Basis für Offline-Caching und Push-Notifications; kein DOM-Zugriff möglich
Web App Manifest: manifest.json mit name, short_name, icons (min. 192×192 und 512×512 PNG), start_url, display («standalone» = ohne Browser-UI), theme_color, background_color; <link rel="manifest" href="/manifest.json"> im HTML-<head>; löst Browser-Installation-Prompt aus wenn PWA-Kriterien erfüllt
HTTPS: Service Worker nur über HTTPS verfügbar (localhost Ausnahme für Entwicklung); Sicherheitsvoraussetzung für alle PWA-Features; Push-Notifications, Geolocation, Camera ebenfalls HTTPS-only; Let's Encrypt für kostenloses HTTPS-Zertifikat
Caching-Strategien: Cache First: Asset aus Cache servieren wenn vorhanden (statische Assets); Network First: immer Netzwerk versuchen, Cache als Fallback (dynamischer Content); Stale While Revalidate: Cache sofort ausliefern, im Hintergrund aktualisieren (Dashboard, Kategorieseiten); Workbox (Google Library) abstrahiert diese Strategien

PWA-Features für Marketing

Web Push Notifications: Push-Benachrichtigungen ohne App; Opt-in-Rate typisch 5–15 % bei Mobile; nach Opt-in: Notifications via Push-Service (FCM für Chrome/Android, APNs für Safari/iOS); Retargeting ohne E-Mail-Adresse möglich; DSGVO: Opt-in-Nachweis erforderlich; Tools: OneSignal, Firebase, Pusher
Add to Homescreen (A2HS): Browser zeigt Installations-Prompt wenn PWA-Kriterien erfüllt; Icon auf Startbildschirm wie native App; Standalone-Modus: Vollbild ohne Browser-Adressleiste; Starbucks PWA: 2× mehr Daily Active Users nach A2HS vs. reguläre Website-Nutzer; Installation direkt aus Browser ohne App Store
Offline-Fähigkeit: Cached Seiten auch ohne Internet nutzbar; besonders wertvoll für mobile Nutzer mit instabilem Netz (Untergrundbahnhöfe, schlechte Mobilabdeckung); E-Commerce: zuletzt angesehene Produkte offline verfügbar; Offline-Fallback-Page statt Browser-Fehler; Formular-Daten in IndexedDB queuen und bei Reconnect senden

iOS-Einschränkungen

Safari iOS PWA-Limits: iOS erlaubt A2HS aber limitiert Funktionen; kein Hintergrund-Sync; Push Notifications nur seit iOS 16.4+ und nur für A2HS-installierte PWAs; Storage-Limit: iOS löscht PWA-Daten nach inaktiver Nutzung (ITP); kein Installations-Prompt-Banner (nur manuell über Share-Menü); Chrome/Firefox auf iOS verwenden WebKit – gleiche Einschränkungen
Progressive Enhancement-Ansatz: PWA-Features wo unterstützt; graceful degradation auf iOS; Core-Experience auch ohne Service Worker funktionsfähig; keine PWA-only-Features für Business-kritische Flows wenn iOS-Anteil hoch

Implementierung und Testing

Workbox: Google-Library für Service Worker; vereinfacht Caching-Strategien erheblich; workbox-webpack-plugin / Vite PWA Plugin für automatische Service Worker Generierung; precaching von statischen Assets im Build; runtime caching für API-Responses
Lighthouse PWA-Audit: Chrome DevTools → Lighthouse → PWA-Kategorie; prüft Service Worker, HTTPS, Manifest, Offline-Verhalten, A2HS-Kriterien; zeigt welche PWA-Features fehlen; PWA-Badge im Lighthouse-Report; Basis für Implementierungs-Priorisierung
Chrome DevTools Application-Tab: Service Worker Status (aktiv/wartend/gestoppt); Cache Storage Inhalt; Manifest-Details; Push-Notifications simulieren; Offline-Modus testen; unverzichtbar für Service-Worker-Debugging

Praxistipp: Der schnellste PWA-Einstieg mit maximalem Marketing-Impact: (1) Web App Manifest erstellen (5 Minuten mit PWA Asset Generator für Icons); (2) Workbox mit Vite PWA Plugin für automatisches Caching statischer Assets integrieren; (3) Eine sinnvolle Offline-Fallback-Page einrichten. Damit ist Ihre Site installierbar und offline-tauglich. Web Push Notifications als zweiten Schritt einbauen – aber erst wenn Sie ein Content-Programm haben das regelmäßig wertvolle Push-Nachrichten rechtfertigt. Testen Sie die PWA-Installierbarkeit mit Lighthouse und Chrome DevTools Application-Tab auf Android Chrome (iOS Safari zeigt keinen Installations-Prompt).