Eine Progressive Web App (PWA) ist eine Web-Anwendung, die mit den Mitteln des offenen Webs (HTML, CSS, JavaScript) gebaut wird, sich für die Nutzerin oder den Nutzer aber wie eine native App anfühlt: Sie lässt sich auf den Startbildschirm legen, startet im Vollbild ohne Browser-Leiste, funktioniert auch bei schlechter oder fehlender Internetverbindung und kann Push-Benachrichtigungen senden. Der Begriff wurde 2015 von dem Google-Entwickler Alex Russell und der Designerin Frances Berriman geprägt. „Progressiv“ bedeutet dabei, dass die App auf jedem Endgerät und in jedem Browser grundsätzlich läuft und je nach Fähigkeit des Geräts schrittweise mehr Funktionen freischaltet.
Was eine PWA von einer normalen Website unterscheidet
Technisch ist eine PWA zunächst eine ganz normale Website. Drei Bausteine machen aus ihr eine „App“:
- Service Worker: Ein im Hintergrund laufendes JavaScript, das als Proxy zwischen App und Netzwerk sitzt. Er fängt Netzwerkanfragen ab, kann Inhalte zwischenspeichern (Caching) und so Seiten auch ohne Verbindung ausliefern. Der Service Worker ist das Herzstück der Offline-Fähigkeit und der Push-Benachrichtigungen.
- Web App Manifest: Eine kleine JSON-Datei, die dem Browser sagt, wie die App heißt, welches Icon sie hat, welche Startseite sie nutzt und ob sie im Vollbild oder mit Browser-Leiste läuft. Erst das Manifest macht die App „installierbar“.
- HTTPS: PWAs funktionieren nur über eine sichere, verschlüsselte Verbindung. Das ist eine harte Voraussetzung, kein optionales Extra.
Sind diese Bausteine vorhanden, bietet der Browser auf unterstützten Geräten an, die App zu „installieren“. Es wird kein klassisches Installationspaket heruntergeladen – die App bleibt eine Website, bekommt aber ein Icon und einen eigenen Fensterrahmen.
Warum PWAs entstanden sind
PWAs sind eine Antwort auf zwei Probleme. Erstens die Reibung beim Installieren nativer Apps: Wer eine App aus dem Store laden muss, springt oft ab, bevor die Installation abgeschlossen ist – gerade im Handel, wo viele Besucher nur ein einziges Mal vorbeischauen. Zweitens die Kosten und Komplexität, dieselbe App für iOS, Android und das Web getrennt zu bauen und zu pflegen. Eine PWA läuft überall aus einer Codebasis und umgeht den App-Store samt dessen Provisionen und Freigabeprozessen.
PWAs im E-Commerce
Für Online-Händler ist die PWA besonders interessant, weil mobile Performance unmittelbar auf den Umsatz durchschlägt. Lange Ladezeiten kosten Conversions; eine PWA, die nach dem ersten Besuch große Teile aus dem Cache lädt, fühlt sich spürbar schneller an. Push-Benachrichtigungen erlauben es, Kunden über Warenkorbabbrüche, Preissenkungen oder Wiederverfügbarkeit zu informieren – ein Kanal, der bisher nativen Apps vorbehalten war. Und das „Installieren“ auf den Startbildschirm schafft einen direkten Wiedereinstieg, ohne dass der Kunde die URL erneut eintippen muss.
Im Shopware-Umfeld gab es mit der „Shopware PWA“ (später im Rahmen des „Composable Frontends“ auf Basis von Vue.js und Nuxt) ein eigenes Angebot, um Shops als headless betriebene PWA auszuliefern. Das Frontend kommuniziert dabei über die Store API mit dem Shopware-Backend – ein typisches Headless-Setup. Wichtig zu wissen: Eine PWA bedingt fast immer einen headless Betrieb, weil das App-artige Frontend von der klassischen serverseitig gerenderten Storefront entkoppelt wird.
Caching-Strategien
Der Service Worker entscheidet, wie Inhalte zwischengespeichert werden. Gängige Strategien sind:
- Cache First: Erst im Cache nachsehen, nur bei Fehlen das Netz fragen – ideal für statische Assets wie Logos und Schriften.
- Network First: Erst das Netz fragen, bei Ausfall auf den Cache zurückfallen – sinnvoll für Inhalte, die möglichst aktuell sein sollen, etwa Preise und Lagerbestände.
- Stale-While-Revalidate: Sofort die zwischengespeicherte Version ausliefern und im Hintergrund aktualisieren – ein guter Kompromiss aus Tempo und Aktualität.
Gerade im Handel ist die Wahl der Strategie heikel: Ein veralteter Preis oder ein falscher Lagerbestand aus dem Cache kann teuer werden. Preise und Verfügbarkeiten gehören daher nie blind in einen aggressiven Cache.
Ein konkretes Beispiel
Ein viel zitiertes Beispiel ist die PWA des Mode-Marktplatzes AliExpress sowie die frühe PWA von Twitter („Twitter Lite“), die mit wenigen hundert Kilobyte auch in Märkten mit langsamen Netzen funktionierte. Google dokumentiert in seinen Fallstudien zahlreiche Händler, die nach der Umstellung auf eine PWA kürzere Ladezeiten und höhere Conversion-Raten gemessen haben. Solche Zahlen sind allerdings projektspezifisch und nicht eins zu eins übertragbar – sie zeigen das Potenzial, nicht eine Garantie.
Grenzen und Nachteile
PWAs sind kein Allheilmittel. Auf iOS war die Unterstützung lange eingeschränkter als auf Android – etwa bei Push-Benachrichtigungen, die Apple erst später (ab iOS 16.4, 2023) für zum Home-Bildschirm hinzugefügte Web-Apps freigab. Der Zugriff auf bestimmte Gerätefunktionen (Bluetooth, NFC, tiefe Systemintegration) bleibt nativen Apps vorbehalten oder ist eingeschränkt. Und PWAs sind in den App-Stores nicht oder nur über Umwege auffindbar – wer auf die Sichtbarkeit im Store angewiesen ist, verliert diesen Kanal. Für rechen- oder grafikintensive Anwendungen (aufwendige Spiele, Videoschnitt) bleibt die native App überlegen.
PWA, native App oder responsive Website?
| Kriterium | Responsive Website | PWA | Native App |
|---|---|---|---|
| Installation nötig | Nein | Optional (1 Klick) | Ja (App-Store) |
| Offline-Fähigkeit | Nein | Ja | Ja |
| Push-Benachrichtigungen | Eingeschränkt | Ja (plattformabhängig) | Ja |
| Im App-Store auffindbar | Nein | Eingeschränkt | Ja |
| Entwicklungskosten | Niedrig | Mittel | Hoch (je Plattform) |
Häufige Missverständnisse
Ein Irrtum ist, eine PWA sei „eine App, die man nicht aus dem Store lädt“ – das greift zu kurz. Eine PWA ist und bleibt eine Website; die App-ähnlichen Fähigkeiten sind progressive Aufwertungen. Ein zweiter Irrtum: PWAs seien automatisch schnell. Tempo entsteht nicht durch das Label, sondern durch saubere Performance-Arbeit – dieselben Hebel, die auch die Core Web Vitals verbessern. Drittens wird oft überschätzt, wie viele Nutzer eine PWA tatsächlich „installieren“; der größere Wert liegt häufig in Geschwindigkeit und Offline-Robustheit, nicht im Icon auf dem Startbildschirm.
Ausblick
Mit der zunehmenden Reife der Web-Plattform – mehr Browser-APIs, bessere iOS-Unterstützung, leistungsfähigere Frameworks – verschwimmt die Grenze zwischen Web und nativer App weiter. Für viele Händler ist die PWA der pragmatische Mittelweg: app-ähnliche Erlebnisse ohne den Aufwand getrennter native Apps. Wer den Weg geht, sollte ihn als Teil einer headless Strategie verstehen und Performance, Caching und Datenaktualität von Anfang an mitdenken. Eine fundierte technische Einführung bieten die MDN Web Docs zu Progressive Web Apps.
FAQ
Brauche ich für eine PWA einen App-Store?
Nein. Eine PWA wird über den Browser ausgeliefert und kann direkt vom Startbildschirm aus genutzt werden. Eine optionale Listung in den Stores ist über Verpackungstechniken möglich, aber nicht erforderlich.
Funktioniert eine PWA auf dem iPhone?
Ja. Die Unterstützung war lange eingeschränkter als auf Android, hat sich aber verbessert – Push-Benachrichtigungen für Web-Apps unterstützt iOS seit Version 16.4.
Ist eine PWA gut für SEO?
Grundsätzlich ja, weil eine PWA eine Website mit echten URLs bleibt. Entscheidend ist, dass Inhalte für Suchmaschinen sichtbar gerendert werden – bei rein clientseitigem Rendering sind Server-Side Rendering oder Prerendering wichtig.
Was ist der Unterschied zwischen PWA und Headless Commerce?
Headless beschreibt die Trennung von Frontend und Backend über APIs. Eine PWA ist eine konkrete Frontend-Ausprägung, die typischerweise headless betrieben wird.