Progressive Web App (PWA): Definition, Funktionsweise und Einsatz

Sie haben mit hoher Wahrscheinlichkeit bereits eine Progressive Web App genutzt, ohne es zu merken. Wenn ein Onlineshop anbietet, die Seite « zum Home-Bildschirm hinzuzufügen », das Symbol anschließend neben Ihren anderen Apps liegt und beim Öffnen weder Adressleiste noch Tabs erscheinen: Das ist eine PWA. Technisch sind Sie weiterhin auf einer Website. Praktisch nutzen Sie eine Anwendung.

Dieser Leitfaden liefert die genaue Definition einer Progressive Web App, erklärt den Unterschied zu einer reinen Responsive-Website, zeigt was sie kann und was nicht — besonders auf dem iPhone — und hilft bei der Entscheidung, ob das Format zu Ihrem Projekt passt.

Definition: Was ist eine Progressive Web App?

Eine Progressive Web App (PWA) ist eine Webanwendung auf Basis der Standard-Webtechnologien (HTML, CSS, JavaScript), die moderne Browser-Funktionen nutzt, um ein Erlebnis auf dem Niveau einer mobilen App zu bieten: Installation auf dem Home-Bildschirm, Start im Vollbild, schnelles Laden, teilweise Offline-Nutzung und Push-Benachrichtigungen.

Der Begriff wurde 2015 von Google eingeführt. Das Attribut « progressive » stammt vom Prinzip der progressiven Verbesserung: Dieselbe URL funktioniert überall, und jeder Browser holt heraus, was er kann. In einem älteren Browser sieht der Nutzer eine normale Website, in einem modernen eine installierbare Anwendung. Es gibt nie eine zweite Version zu pflegen.

Was eine PWA von einer klassischen mobilen Website unterscheidet

Eine Responsive-Website passt sich der Bildschirmgröße an, mehr nicht. Eine Progressive Web App ergänzt drei Dinge, die eine klassische Website nicht hat: Sie ist installierbar (eigenes Symbol, eigener Start), sie ist zuverlässig (sie zeigt auch bei schlechter oder fehlender Verbindung etwas Nutzbares), und sie kann im Hintergrund arbeiten (Benachrichtigungen, Synchronisierung).

• Responsive-Website: öffnet im Browser, hängt am Netz, kein Symbol, keine Benachrichtigungen.
• Progressive Web App: installiert sich, startet im Vollbild, hält Daten im Cache, kann benachrichtigen.
• Native App: wird aus einem Store geladen, greift auf die gesamte Hardware zu, wird gezielt für iOS und Android entwickelt.

So funktioniert eine Progressive Web App

Drei Bausteine machen aus einer Website eine Progressive Web App. Sie sind unabhängig vom Framework, eine bestehende Website lässt sich also ohne Neubau umrüsten.

1. Das Web App Manifest

Eine kleine JSON-Datei, die Ihre Anwendung gegenüber dem Betriebssystem beschreibt: Name, Kurzname unter dem Symbol, Icons in mehreren Größen, Themenfarbe, Startseite und Anzeigemodus. Sie ermöglicht dem Browser das Installationsangebot und sorgt dafür, dass die Adressleiste beim Start verschwindet.

2. Der Service Worker

Das technische Herzstück einer PWA: ein Skript, das getrennt von der Seite im Hintergrund läuft und als Vermittler zwischen Anwendung und Netzwerk arbeitet. Es fängt Anfragen ab und entscheidet, ob eine Version aus dem Cache ausgeliefert oder aktuelle Daten geholt werden. Daraus ergeben sich nahezu sofortiges Laden beim zweiten Start, ein nutzbarer Bildschirm bei Netzausfall und Push-Benachrichtigungen bei geschlossener App.

3. HTTPS

Ein Service Worker läuft nur über eine gesicherte Verbindung. HTTPS ist für eine Progressive Web App daher keine Option, sondern Voraussetzung — genau wie für die Sichtbarkeit in Suchmaschinen.

Checkliste: Kriterien einer echten PWA

Viele Websites nennen sich Progressive Web App, ohne die Bedingungen zu erfüllen. Das sollten Sie prüfen, bevor Sie den Begriff verwenden.

• Die Website wird vollständig über HTTPS ausgeliefert.
• Ein gültiges Manifest ist vorhanden, mindestens mit Name, 512×512-Icon und Startseite.
• Ein Service Worker ist registriert und deckt mindestens ein Offline-Szenario ab.
• Die Oberfläche ist mobil ohne Zoom und ohne horizontales Scrollen bedienbar.
• Die mobile Performance ist im Griff (Core Web Vitals: LCP, INP, CLS).
• Jeder wichtige Bereich behält eine saubere, für Google indexierbare URL.

Die konkreten Vorteile einer Progressive Web App

• Eine einzige Codebasis. Dasselbe Produkt dient als Website, Android-App und iPhone-App, statt drei Projekte zu finanzieren und zu pflegen.
• Keine Installationshürde. Nutzer kommen über einen Link und starten sofort. Kein Umweg über einen Store, kein Download von mehreren Dutzend Megabyte.
• Sofortige Updates. Sie veröffentlichen, und beim nächsten Laden haben alle die neue Version. Keine Wartezeit durch Prüfungen, keine Nutzer auf veralteten Ständen.
• Sichtbarkeit bleibt erhalten. Anders als eine native App, die für Google unsichtbar ist, bleibt eine Progressive Web App eine indexierbare Website mit Suchtraffic-Potenzial.
• Keine Store-Provision. Zahlungen laufen über Ihre eigene Weblösung, ohne Abgabe auf In-App-Käufe.

Grenzen, die Sie vor der Entscheidung kennen sollten

Eine Progressive Web App ist keine getarnte native App. Drei Grenzen bestimmen die Entscheidung.

• Der App Store bleibt für PWAs geschlossen. Apple akzeptiert keine Progressive Web App in unveränderter Form: Eine App ohne eigenen Mehrwert gegenüber der Website wird abgelehnt. Unter Android lässt sich eine PWA dagegen über eine Trusted Web Activity im Play Store veröffentlichen. Hängt Ihre Neukundengewinnung an der Sichtbarkeit im App Store, reicht eine PWA allein nicht.
• iOS hinkt hinterher. Web-Push-Benachrichtigungen gibt es auf dem iPhone seit iOS 16.4, aber nur wenn der Nutzer die Anwendung tatsächlich zum Home-Bildschirm hinzugefügt hat — ein zusätzlicher Schritt, den Safari deutlich weniger prominent anbietet als Chrome unter Android. Mehrere fortgeschrittene APIs fehlen weiterhin.
• Der Hardwarezugriff ist eingeschränkt. Kamera, Mikrofon und Standort funktionieren gut. Bluetooth, NFC, fortgeschrittene Biometrie, aufwendige Videoverarbeitung oder tiefe Systemintegration bleiben nativer Domäne.

PWA, native App oder WebView: der Vergleich

Wann die Progressive Web App die richtige Wahl ist

Eine PWA ist selten ein Kompromiss aus Verlegenheit: Für eine ganze Produktkategorie ist sie objektiv das beste Format.

• Ein MVP oder ein Produkt, das schnell validiert werden muss und keine doppelte native Entwicklung rechtfertigt.
• Ein internes Tool, ein Kundenportal oder ein Back-Office, das niemand in einem Store sucht.
• Ein Onlineshop oder ein Buchungsdienst, wo jeder zusätzliche Schritt vor dem Kauf die Konversion senkt.
• Ein Medien- oder Content-Angebot, dessen Wachstum auf organischer Suche beruht.

Umgekehrt gehört Ihr Projekt zum Nativen, wenn es fortgeschrittene Hardwarenutzung oder ein stark animiertes Erlebnis erfordert — oder wenn der App Store Ihr wichtigster Akquisekanal ist.

So erstellen Sie eine Progressive Web App

Das Vorgehen umfasst fünf Schritte in dieser Reihenfolge.

• 1. Eine solide Web-Basis bauen. Mobile-first-Oberfläche, klare Navigation, saubere Performance: Eine langsame PWA bleibt eine langsame App.
• 2. Das Manifest ergänzen. Name, Icons, Farben, Anzeigemodus und Startseite.
• 3. Den Service Worker einrichten. Festlegen, was in den Cache geht und was aus dem Netz kommen muss, dann den Offline-Bildschirm gestalten.
• 4. Alles über HTTPS ausliefern. Mit eigener Domain, entscheidend für Vertrauen und Sichtbarkeit.
• 5. Auf echten Geräten testen. Installation unter Android und iOS, Offline-Verhalten und Core Web Vitals prüfen.

Progressive Web App und SEO

Das ist der strategische Hauptvorteil des Formats: Ihre Anwendung bleibt eine Website. Jede Seite behält eine indexierbare URL, eigenen Title und eigene Meta-Description und kann strukturierte Daten tragen. Die durch den Cache gewonnene Geschwindigkeit zahlt direkt auf die Core Web Vitals ein, die Teil der Page-Experience-Signale sind. Eine native App liefert dagegen keinerlei Sichtbarkeit in den Suchergebnissen.

Ein Punkt zur Vorsicht: Wird der Inhalt ausschließlich clientseitig gerendert, stellen Sie sicher, dass Crawler ihn weiterhin erreichen. Serverseitiges Rendering oder statische Generierung verhindert, dass Sie Sichtbarkeit für App-Verhalten opfern.

Wo Cadrant ansetzt

Mit Cadrant beschreiben Sie Ihre Anwendung in natürlicher Sprache und erhalten eine echte, mobile-first Web-Basis mit Code, der Ihnen gehört. Sie iterieren Prompt für Prompt, veröffentlichen unter eigener Domain über HTTPS und behalten ein Produkt, das Google indexieren kann.

Und falls Ihr Projekt später doch App-Store-Präsenz braucht, sind Sie nicht eingesperrt: Cadrant erzeugt auch mobile Anwendungen mit automatisierter Veröffentlichung (Zertifikat, Signaturprofil, Produktions-Build und Upload zu App Store Connect). Sie können also mit einer Progressive Web App den Markt validieren und den Store-Kanal ergänzen, sobald er sich rechnet.

Fazit

Merken Sie sich die einfache Definition: Eine Progressive Web App ist eine Website, die sich installieren lässt und sich wie eine App verhält. Sie bringt eine einzige Codebasis, erhaltene Sichtbarkeit in der Suche, sofortige Updates und deutlich geringere Einstiegskosten als nativ — im Gegenzug für eingeschränkten Hardwarezugriff und fehlende App-Store-Präsenz.

Für die meisten startenden Projekte ist das der vernünftigste Weg: Das Produkt landet bei echten Nutzern, ohne monatelanges Budget zu binden, und die native Option bleibt offen für den Tag, an dem sie sich wirklich lohnt.