PWA: Manifest und installierbare Web-Apps – Grundlagen

Kurz: Eine Progressive Web App ist eine Webseite, die sich wie eine App installieren lässt: mit Manifest, Service Worker und HTTPS bekommt sie Icon, Vollbild, Offline-Fähigkeit und Hintergrunddienste.

Genauer: PWAs verbinden Web und App: ein Code, kein App-Store nötig, Updates sofort. Sie sind installierbar (Startbildschirm/Desktop), arbeiten teils offline und können Benachrichtigungen senden.

Im Detail

Die drei Zutaten

1. HTTPS (außer localhost).
2. Web-App-Manifest (manifest.webmanifest): Name, Icons, Farben, Startadresse, Anzeigemodus:

{
  "name": "Emzett", "short_name": "Emzett",
  "start_url": "/", "display": "standalone",
  "background_color": "#0b0b10", "theme_color": "#0b0b10",
  "icons": [{"src":"/icon-192.png","sizes":"192x192","type":"image/png"},
            {"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]
}

Im HTML: <link rel="manifest" href="/manifest.webmanifest">. 3. Service Worker: Skript im Hintergrund, das Anfragen abfängt, cachen und Offline-Seiten liefern kann.

Service Worker und Caching

Typische Strategien: Cache First (statische Dateien), Network First (aktuelle Daten, Fallback Cache), Stale-While-Revalidate (sofort alt, im Hintergrund neu). Wichtig: Versionierung der Caches, alte Caches löschen, Update-Hinweis („Neue Version verfügbar“), keine sensiblen Daten cachen, POST-Anfragen nicht blind wiederholen. Werkzeuge: Workbox, Frameworks-Plugins. Debuggen in den Browser-Entwicklerwerkzeugen unter Anwendung.

Fähigkeiten und Grenzen

Möglich: Installation, Offline-Nutzung, Push-Benachrichtigungen (auf iOS ab installierter PWA), Hintergrund-Sync, Kamera, Standort, Dateisystem-Zugriff, Teilen. Grenzen: Auf iOS Einschränkungen (Speicherlimit, weniger APIs), kein vollständiger Zugriff auf Gerätefunktionen wie native Apps, Auffindbarkeit ohne Store. Datenschutz: Push und Hintergrund-Sync brauchen Einwilligung.

Prüfen und Praxis

Mit Lighthouse (PWA-Kriterien), chrome://inspect, „Zum Startbildschirm hinzufügen“ testen. Offline-Fallback-Seite anbieten, maskierbare Icons, theme_color, Screenshots im Manifest für Installationsdialog. Prüfe Updates: Service-Worker-Updates greifen erst nach Schließen aller Tabs, sofern nicht skipWaiting gesetzt wird. Lies auch Offline-first und Background-Sync.

Siehe auch: Offline-first und Background-Sync, Service Worker, Web-Speicher, Lighthouse