Was ist eine Progressive Web App?
Eine Progressive Web App (PWA) ist eine Website die sich wie eine native App verhält. Sie kann auf dem Homescreen installiert werden, offline funktionieren, Push-Benachrichtigungen senden und sich wie eine vollständige App anfühlen — ohne App Store, ohne Installation via .apk oder .ipa.
PWAs funktionieren in jedem Browser, werden aber von Chrome, Edge und Safari am besten unterstützt. Auf Android lassen sie sich vollständig installieren; auf iOS (seit iOS 11.3) ebenfalls, mit einigen Einschränkungen.
Die drei Kernkomponenten einer PWA
- HTTPS — PWAs erfordern eine sichere Verbindung (außer localhost für Entwicklung)
- Web App Manifest — JSON-Datei mit App-Name, Icons, Farben, Display-Modus
- Service Worker — JavaScript das im Hintergrund läuft und Caching, Offline-Support und Push-Notifications ermöglicht
Schritt 1: Das Web App Manifest erstellen
Das Manifest ist eine JSON-Datei (manifest.json) die im Root deines Webservers liegt und alle App-Metadaten enthält:
name— vollständiger App-Name (auf Splash Screen)short_name— Kurzname (unter dem Icon, max. 12 Zeichen)description— Kurzbeschreibung der Appstart_url— URL die beim Öffnen der App gestartet wird (meist "/")display— "standalone" (kein Browser-UI) oder "minimal-ui"theme_color— Farbe der Browser-/Status-Barbackground_color— Hintergrundfarbe des Splash Screensicons— Array mit allen Icon-Größen
⚡ Schnellstart: Mit dem JNRT Pixel PWA Generator erzeugst du in einem Schritt: alle Icons in den richtigen Größen, Maskable Icons, Apple Touch Icons, manifest.json und den fertigen HTML-Code — als ZIP-Download. Kein Upload, kein Backend.
Schritt 2: Icons in allen Größen
PWAs benötigen Icons in verschiedenen Größen für unterschiedliche Geräte und Kontexte:
| Größe | Verwendung |
|---|---|
| 72×72 | Ältere Android-Geräte |
| 96×96 | Android Standard |
| 128×128 | Chrome Web Store |
| 144×144 | Windows 8 Tiles |
| 152×152 | iPad Retina (iOS) |
| 192×192 | Android Chrome — wichtigste Größe |
| 384×384 | Hochauflösende Android-Geräte |
| 512×512 | Splash Screen, Google Play |
| 180×180 | Apple Touch Icon (iOS) |
Maskable Icons
Android passt Icons in verschiedene Formen an (Kreis, Quadrat, gerundetes Quadrat). Ein Maskable Icon berücksichtigt das: Das eigentliche Logo wird kleiner dargestellt (auf ca. 80% der Fläche), umgeben von einem einfarbigen Hintergrund, der weggeschnitten werden kann.
Ohne Maskable Icon kann es passieren, dass dein Icon auf Android weiße Ecken zeigt oder seltsam zugeschnitten wirkt. Mindestens die Größen 192×192 und 512×512 sollten als Maskable Icon existieren.
Schritt 3: HTML-Integration
Dieser Code muss in den <head> jeder Seite:
<link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#f97316"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
Besonders die Apple-spezifischen Meta-Tags sind wichtig, da iOS Safari das Manifest-Format nicht vollständig unterstützt und eigene Tags benötigt.
Schritt 4: Service Worker (für Offline-Support)
Ein Service Worker ist ein JavaScript-Skript das im Hintergrund läuft und Netzwerk-Anfragen abfangen kann. Er ist optional für die PWA-Installation, aber notwendig für Offline-Funktionalität.
Der einfachste Service Worker cacht alle statischen Assets beim ersten Besuch und liefert sie danach direkt aus dem Cache:
- Registrierung im Haupt-JavaScript:
navigator.serviceWorker.register("/sw.js") - Der Service Worker (sw.js) liegt im Root des Webservers
- Cache-Strategie wählen: Cache-First, Network-First oder Stale-While-Revalidate
Fertige Lösungen für Service Worker
- next-pwa — automatisches Service Worker Setup für Next.js
- Workbox (Google) — umfangreiches Service Worker Framework
- Vite PWA Plugin — für Vite-basierte Projekte
Schritt 5: Testen
Nach der Implementierung diese Checks durchführen:
- Chrome DevTools → Application → Manifest — zeigt ob das Manifest korrekt erkannt wird
- Chrome DevTools → Lighthouse → PWA — vollständiger PWA-Score mit Fehlerdiagnose
- Android-Gerät — "Zum Startbildschirm hinzufügen" testen
- iOS Safari — Teilen → "Zum Home-Bildschirm" testen
PWA-Checkliste
| Anforderung | Beschreibung |
|---|---|
| ✅ HTTPS | Pflicht (außer localhost) |
| ✅ manifest.json | Mit name, icons, start_url, display |
| ✅ Icon 192×192 | Mindestgröße für Android |
| ✅ Icon 512×512 | Für Splash Screens |
| ✅ Apple Touch Icon 180×180 | iOS Homescreen |
| ✅ HTML-Tags | manifest link + theme-color meta |
| ⭐ Maskable Icons | Für korrektes Android-Clipping |
| ⭐ Service Worker | Für Offline-Support |
PWA vs. Native App — wann lohnt sich was?
| Aspekt | PWA | Native App |
|---|---|---|
| Entwicklungskosten | Niedrig (Web-Technologien) | Hoch (iOS + Android separat) |
| App Store | Nicht nötig | Pflicht |
| Updates | Sofort (kein App-Store-Review) | Review-Prozess, 1–3 Tage |
| Performance | Sehr gut, aber kein Native-Level | Beste Performance |
| Gerätezugriff | Eingeschränkt (Kamera, GPS: ja; Bluetooth: eingeschränkt) | Vollständig |
| Auffindbarkeit | Über Web/Google | App Store |
| Installation | Optional, ohne App Store | Pflicht |
Fazit
Eine PWA zu erstellen ist 2025 einfacher denn je. Das Manifest, die Icons und die HTML-Integration können in unter einer Stunde umgesetzt werden — besonders mit Tools wie dem JNRT Pixel PWA Generator, der alle Icons und das Manifest automatisch generiert. Der Service Worker für Offline-Support ist optional aber empfehlenswert für produktive Anwendungen.