Eine Progressive Web App (PWA) ist eine Webanwendung, die sich wie eine native App anfühlt – installierbar auf dem Homescreen, offline lauffähig, in der Lage Push-Benachrichtigungen zu empfangen und ohne Browser-Chrome im Vollbild zu laufen. Technisch bleibt sie eine Webseite, ausgeliefert über HTTPS und gerendert vom Browser – aber mit zwei zusätzlichen Kernkomponenten (Service Worker + Web App Manifest), die den App-Charakter erst möglich machen. Der Begriff wurde 2015 von Google geprägt und ist heute fester Standard im modernen Web.
Was macht eine App zur PWA?
Eine PWA muss drei Anforderungen erfüllen, damit Browser sie als installierbar erkennen:
- Sichere Auslieferung über HTTPS – kein Service Worker ohne TLS
- Web App Manifest – eine
manifest.webmanifest-Datei mit Name, Icons, Theme-Farbe, Start-URL - Service Worker – ein JavaScript-Hintergrundprozess, der Requests abfangen, cachen und Offline-Inhalte ausliefern kann
Sind diese drei Punkte erfüllt, schlägt der Browser dem Nutzer die Installation automatisch vor („Zum Startbildschirm hinzufügen“).
Service Worker – das Herzstück
Der Service Worker ist ein im Hintergrund laufendes Skript, das unabhängig von der Webseite weiterläuft – auch wenn der Tab geschlossen ist. Er fängt Netzwerk-Anfragen ab und entscheidet pro Request: aus dem Cache liefern, vom Server holen, oder beides kombinieren. Typische Strategien:
| Strategie | Wann sinnvoll |
|---|---|
| Cache First | Statische Assets (Bilder, CSS, JS) – schnell, offline-fähig |
| Network First | News-Feeds, Dashboards – aktuelle Daten priorisieren |
| Stale-While-Revalidate | Listen, die schnell laden, aber sich im Hintergrund aktualisieren sollen |
| Network Only | Login-Requests, POST-Anfragen – nie cachen |
Service Worker ermöglichen außerdem Push-Benachrichtigungen (über die Push API) und Background Sync (Aufgaben, die erst bei wieder verfügbarer Netzwerk-Verbindung ausgeführt werden).
Das Web App Manifest
Eine kleine JSON-Datei beschreibt die App für das Betriebssystem:
{
"name": "aceArt Tools",
"short_name": "aceArt",
"start_url": "/",
"display": "standalone",
"background_color": "#111016",
"theme_color": "#F0533E",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
display: "standalone" blendet die Browser-Chrome aus; theme_color färbt die Statusleiste; die Icons landen auf dem Homescreen.
Vorteile einer PWA
Eine Codebasis für alle Plattformen
Die PWA läuft im Browser – also auf Android, iOS, Windows, macOS, Linux ohne Anpassung. Im Vergleich zur Doppelentwicklung iOS + Android oft die deutlich günstigere Lösung.
Kein App-Store-Zwang
Die App wird über die normale Webseite verteilt – keine 30 % Store-Gebühr, keine wochenlangen Review-Prozesse, sofortige Updates ohne erneutes Review.
Schneller Erst-Aufruf
Eine PWA lädt mit den gleichen Vorteilen wie eine moderne Webseite (siehe LCP). Nach der ersten Nutzung holt der Service Worker den Großteil der Assets aus dem Cache – Folgeaufrufe sind oft schneller als bei nativen Apps.
Geringere Hürde zur Installation
Anders als bei nativen Apps muss der Nutzer nichts aus einem Store herunterladen – ein Klick auf „Installieren“ reicht. Die App belegt dabei nur einen Bruchteil der typischen Native-App-Größe.
SEO + App in einem
Eine PWA ist gleichzeitig eine Webseite – sie wird indexiert, kann über Google-Suchen gefunden werden und teilt eine URL-Struktur mit dem Marketing-Auftritt.
Grenzen und Schwächen
iOS-Einschränkungen
Apple unterstützt PWAs nur partiell. Push-Notifications gibt es seit iOS 16.4 (2023), aber Background-Sync, Web Bluetooth, NFC und viele Sensor-APIs fehlen weiterhin. Wer auf diese Funktionen angewiesen ist, kommt nur mit einer nativen App weiter.
Keine Tiefe Integration
Apps, die tief ins Betriebssystem eingebettet sein müssen (System-Widgets, Watch-App-Anbindung, App-Clips, Lock-Screen-Komponenten), sind nativ besser aufgehoben.
Keine Store-Sichtbarkeit (auf iOS)
Eine PWA taucht weder im App Store noch im Play Store auf (auf Android lässt sie sich neuerdings indirekt einreichen). Wer Discovery über den Store braucht, kombiniert PWA + Native-Hülle (z. B. mit Capacitor).
PWA vs. native App vs. Hybrid
| PWA | Native | Hybrid (Ionic/Capacitor) | |
|---|---|---|---|
| Entwicklungsaufwand | gering | hoch (pro Plattform) | mittel |
| Performance | gut | beste | gut |
| Native APIs | begrenzt (v. a. iOS) | voll | voll |
| Store-Distribution | nein (Web) | ja | ja |
| Update-Geschwindigkeit | sofort | nach Review | nach Review |
| Offline-Fähigkeit | ja (Service Worker) | ja | ja |
Wann lohnt sich eine PWA?
- Content-zentrierte Apps (News, Blogs, Dokumentationen) – schnelle Auslieferung, Offline-Lesemodus
- B2B-Tools – Dashboards, Buchungssysteme, Kunden-Portale
- E-Commerce – Shop, der gleichzeitig SEO-relevant ist und installiert werden kann
- MVPs und Prototypen – schnelle Time-to-Market ohne Store-Hürde
Weniger geeignet sind PWAs für Games mit hohen Performance-Anforderungen oder Apps, die zwingend native APIs (Health Kit, Bluetooth Low Energy, AR) brauchen.
Tools für die PWA-Entwicklung
- web.dev und Lighthouse – PWA-Audit
- Workbox – Service-Worker-Library mit fertigen Caching-Strategien
- PWABuilder (Microsoft) – Generator für Manifest + Store-Pakete
- Capacitor (Ionic) – verpackt eine PWA in eine native Hülle, falls Store-Distribution gewünscht
Häufige Fragen zu PWAs
Brauche ich einen App Store für eine PWA? Nein. PWAs werden über die normale Webseite verteilt – ein Banner oder ein Menüeintrag „App installieren“ reicht. Auf Wunsch lassen sich PWAs aber auch in den Stores einreichen (Trusted Web Activities, Microsoft Store, mit Capacitor sogar im App Store).
Wie unterscheidet sich eine PWA von einer responsiven Webseite? Eine responsive Webseite passt ihr Layout an die Bildschirmgröße an. Eine PWA ist eine responsive Webseite + Service Worker + Manifest + HTTPS – damit zusätzlich offline-fähig und installierbar.
Sind PWAs schlechter für SEO? Im Gegenteil – eine PWA wird wie jede andere Webseite indexiert. Wichtig ist nur, dass der initiale Inhalt server- oder static-side gerendert wird; rein clientseitig erzeugter Content kommt bei Suchmaschinen verzögert oder gar nicht an.
Funktioniert PWA auf iPhones? Ja, mit Einschränkungen. Die meisten Basis-Features (Installation, Offline, Service Worker) gehen seit Jahren, Push-Notifications erst seit iOS 16.4. Manche Hardware-APIs fehlen weiterhin.
Fazit
PWAs sind die pragmatische Antwort auf „Wir brauchen eine App, aber bitte ohne den vollen Native-Aufwand“. Sie kombinieren die Reichweite und Pflegeeffizienz einer Webseite mit der App-Erfahrung eines Stores – ohne die Nachteile beider Welten zu erben. Wir konzipieren und entwickeln PWAs sowohl von Grund auf als auch als Ergänzung zu bestehenden Webseiten. Mehr Details auf der Seite zur App-Entwicklung oder direkt im unverbindlichen Beratungsgespräch.