Stellen Sie sich vor: Ihre Nutzer können Ihre App direkt aus dem Browser auf ihren Homescreen installieren — ohne App Store, ohne Download, ohne Wartezeit. Genau das ermöglichen Progressive Web Apps (PWAs). Doch wann ist eine PWA die richtige Wahl, und wann sollten Sie lieber auf eine native App setzen?
Dieser Artikel erklärt nicht nur die Unterschiede auf dem Papier, sondern zeigt anhand konkreter Implementierungsdetails und realer Erfolgsbeispiele, was eine PWA tatsächlich kann — und was nicht.
Was ist eine Progressive Web App — technisch erklärt
Eine Progressive Web App ist eine Webanwendung, die sich wie eine native App verhält. Drei technische Fundamente:
Service Worker
Ein Service Worker ist ein JavaScript-Skript, das der Browser im Hintergrund ausführt. Er agiert als programmierbarer Proxy zwischen der Webanwendung und dem Netzwerk. Requests können abgefangen, gecacht oder verändert werden, auch wenn die Seite nicht geöffnet ist.
Web App Manifest
Das Manifest ist eine JSON-Datei mit Name, Icons, Startbildschirm-Farbe, Anzeigemodus — ohne gültiges Manifest bietet Chrome keinen Installations-Prompt an.
{
"name": "MeineApp",
"short_name": "App",
"start_url": "/app",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#14b8a6",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
HTTPS als Voraussetzung
Service Workers funktionieren ausschließlich über HTTPS. Für die Entwicklung erlaubt der Browser localhost.
Offline-Funktionalität implementieren
Zwei grundlegende Caching-Strategien:
Cache-First: Service Worker schaut zuerst im Cache nach. Perfekt für statische Assets.
Network-First: Service Worker versucht zuerst den Netzwerk-Request. Ideal für dynamische Inhalte.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/static/')) {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request).then(response => {
const clone = response.clone();
caches.open('static-v1').then(cache => cache.put(event.request, clone));
return response;
});
})
);
}
});
Push-Benachrichtigungen
Auf Android funktioniert Web-Push genauso zuverlässig wie native Push. Auf iOS war Web-Push lange nicht verfügbar — erst ab iOS 16.4 (2023) in Safari unterstützt, aber nur wenn die PWA zum Homescreen hinzugefügt wurde.
Permissions sofort beim ersten Besuch werden von über 80 % der Nutzer abgelehnt. Erklären Sie zuerst den Mehrwert, dann fragen Sie.
Installation & Homescreen
Der Browser bietet den Installations-Prompt wenn: gültiges Manifest, HTTPS, Service Worker registriert.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
installButton.addEventListener('click', async () => {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
deferredPrompt = null;
});
Auf iOS: Nutzer müssen manuell über den Safari Share-Button "Zum Home-Bildschirm hinzufügen" wählen.
PWA vs. Native App vs. Hybrid: Der ehrliche Vergleich
Kriterium | PWA | React Native | Native
--------------------|----------|--------------|-------
Entwicklungskosten | | |
Codebase | 1 | 1 | 2
Performance | | |
Offline-Support | | |
Hardware-Zugriff | | * |
App Store Präsenz | Nein | Ja | Ja
iOS Push-Support | Begrenzt | Ja | Ja
SEO | Ja | Nein | Nein
Update-Deployment | Sofort | App Store | App Store
Reale Erfolgsbeispiele mit Zahlen
Starbucks PWA: Die PWA ist 99,84 % kleiner als die iOS-App (233 KB vs. 148 MB). Ergebnis: verdoppelte Anzahl täglich aktiver Nutzer. Bestellungen stiegen um 23 %.
Twitter Lite: Ergebnis: 70 % weniger verbrauchte Datenmenge, 65 % mehr Seiten pro Sitzung, 75 % mehr Tweets, 20 % geringere Absprungrate.
Uber PWA: Die App ist nur 50 KB groß. Ladezeit unter 3 Sekunden auf 2G-Netz.
Für viele B2B-Anwendungen, interne Tools und Service-Apps ist eine PWA 2026 die wirtschaftlichste Wahl. Für Verbraucher-Apps, die im App Store entdeckt werden sollen, führt an einer nativen App meist kein Weg vorbei.
Technische Anforderungen: Die PWA-Checkliste
- HTTPS: Pflicht.
- Gültiges Web App Manifest: Mit name, short_name, start_url, display, icons (mind. 192×192 und 512×512 px)
- Service Worker registriert: Mit Fetch-Handler für Offline-Fallback
- Responsive Design: Viewport-Meta-Tag, kein horizontales Scrolling
- LCP unter 2,5 Sekunden: Largest Contentful Paint als Core Web Vital
- Keine Mixed-Content-Fehler: Alle Ressourcen über HTTPS
- Installierbar: Kriterien für beforeinstallprompt-Event erfüllt
- Offline-Fallback:** Eigene Offline-Seite statt Browser-Fehlerseite
Was kostet eine PWA im Vergleich?
Eine solide PWA kostet typischerweise 15.000–60.000 Euro — 30–50 % günstiger als eine vergleichbare native App für beide Plattformen. Eine PWA ist technisch eine Webanwendung — Webentwickler können sie ohne iOS- oder Android-Kenntnisse erstellen.
Fazit: PWA als MVP, native App als Erweiterung
Für den Start empfehlen wir vielen Kunden eine PWA als MVP: schneller marktreif, günstiger, sofort für alle Plattformen verfügbar. Wenn die Nutzerbasis wächst und native Features benötigt werden, kann die native App folgen.
Sie möchten wissen, ob eine PWA oder eine native App besser zu Ihrem Projekt passt? Wir beraten Sie kostenlos.
Haben Sie Fragen zu diesem Thema? Jetzt Kontakt aufnehmen.