Was ist eine Progressive Web App (PWA)?
Eine Progressive Web App ist eine Website, die sich wie eine App installieren lässt und offline funktioniert. PWA vs. native App im Vergleich.
Oleksandr Grygoriev · Aktualisiert:
- Anforderungen
- Prototyp
- EntwicklungProgressive Web App (PWA)
- Auslieferung
- Betrieb
Inhaltsverzeichnis
Eine Progressive Web App (PWA) ist eine Webanwendung, die sich wie eine App auf dem Startbildschirm installieren lässt, auch ohne Internetverbindung funktioniert und Push-Benachrichtigungen senden kann. Sie wird mit gewöhnlichen Webtechnologien gebaut und läuft im Browser – ohne Umweg über App Store oder Google Play.
Für Nutzer fühlt sich eine PWA wie eine App an. Für Unternehmen ist sie im Kern eine Website: ein Code für alle Geräte, eine Adresse, sofort aktualisiert.
PWA – Bedeutung und Merkmale
„Progressive“ heißt: Die Anwendung funktioniert in jedem Browser und bietet zusätzliche Fähigkeiten dort, wo das Gerät sie unterstützt. Typische Merkmale einer PWA:
- Installierbar: Ein Symbol auf dem Startbildschirm öffnet die Anwendung im eigenen Fenster, ohne Adressleiste.
- Offline-fähig: Wichtige Inhalte und Funktionen stehen auch ohne Netz zur Verfügung.
- Push-Benachrichtigungen: Die Anwendung kann Nutzer auf neue Aufträge oder Nachrichten hinweisen.
- Responsiv: Dieselbe Anwendung passt sich Smartphone, Tablet und Desktop an.
- Sicher: PWAs laufen ausschließlich über verschlüsselte Verbindungen (HTTPS).
Wie eine PWA funktioniert
Hinter einer PWA stehen zwei technische Bausteine, die eine normale Website ergänzen:
Web-App-Manifest: Eine kleine Datei beschreibt Name, Symbol, Farben und Startseite der Anwendung. Daran erkennt der Browser, dass er die Seite als App installieren kann.
Service Worker: Ein Skript, das im Hintergrund zwischen Anwendung und Netz sitzt. Es legt Dateien und Daten in einem Cache ab, damit die Anwendung auch offline startet, und nimmt Push-Nachrichten entgegen. Eingaben ohne Netz kann es zwischenspeichern und senden, sobald die Verbindung zurück ist.
Updates erreichen alle Nutzer automatisch beim nächsten Öffnen. Niemand muss eine neue Version im Store herunterladen.
PWA vs. native App
Eine native App wird eigens für iOS und Android entwickelt und über die App Stores verteilt. Der Vergleich:
| Progressive Web App | Native App | |
|---|---|---|
| Entwicklungsaufwand | Ein Code für alle Geräte | Meist getrennt für iOS und Android, deutlich höher |
| Zeit bis zum Start | Kürzer, keine Store-Prüfung | Länger, Freigabe durch die Stores |
| Verteilung | Link oder Website, Installation mit einem Tipp | Über App Store und Google Play |
| Updates | Sofort für alle | Über den Store, Nutzer müssen aktualisieren |
| Zugriff auf Gerätefunktionen | Kamera, Standort, Benachrichtigungen; einige Funktionen eingeschränkt | Vollständig, etwa Bluetooth, Hintergrunddienste |
| Auffindbarkeit | Über Suchmaschinen wie eine Website | Über die Suche im Store |
| Laufende Kosten | Ein System zu pflegen | Zwei Apps plus Store-Anforderungen |
Faustregel: Braucht Ihre Anwendung tiefen Zugriff auf Hardware oder muss sie im App Store präsent sein, ist die native App im Vorteil. Geht es um Formulare, Listen, Aufträge und Dokumente, reicht eine PWA fast immer.
Beispiele aus dem Mittelstand
Auftragsapp für Monteure: Ein Handwerksbetrieb gibt seinen Monteuren eine PWA für Aufträge, Fotos und Stundenzettel. Im Keller ohne Empfang wird trotzdem dokumentiert; übertragen wird, sobald wieder Netz da ist.
Kundenportal: Kunden eines Dienstleisters installieren das Portal auf dem Smartphone und werden benachrichtigt, wenn ein Dokument bereitliegt – ohne dass sie eine App aus dem Store laden müssen.
Interne Checklisten: Ein Produktionsbetrieb ersetzt Papier-Prüflisten an der Maschine durch eine PWA auf dem Tablet. Die Ergebnisse landen direkt in der Auswertung.
Vorteile und Grenzen
Vorteile: geringerer Aufwand als zwei native Apps, schnelle Updates, keine Store-Gebühren und -Prüfungen, auffindbar über Suchmaschinen, und dieselbe Anwendung läuft auch am Büro-PC.
Grenzen: Einige Gerätefunktionen sind im Browser nicht oder nur eingeschränkt verfügbar, und Apple unterstützt manche PWA-Funktionen auf dem iPhone später oder mit Einschränkungen. Push-Benachrichtigungen auf iOS etwa setzen voraus, dass die PWA auf dem Startbildschirm installiert ist. Das sollte vor dem Projekt geprüft werden.
PWA und Suchmaschinen
Weil eine PWA im Kern eine Website ist, können Suchmaschinen ihre öffentlichen Seiten crawlen und in den Index aufnehmen. Die Inhalte einer nativen App tauchen in der Google-Suche dagegen kaum auf. Voraussetzung ist, dass die Inhalte nicht erst nach dem Login oder ausschließlich per JavaScript entstehen. Serverseitiges Rendern sorgt dafür, dass Suchmaschinen und Nutzer sofort lesbaren Inhalt bekommen.
Ein Nebeneffekt des Service Workers: Wiederkehrende Besucher laden die Anwendung aus dem Zwischenspeicher, sie startet spürbar schneller. Schnelle Ladezeiten verbessern die Core Web Vitals, die Google als Signal für die Nutzererfahrung heranzieht. Wie Suchmaschinen Seiten aufnehmen, erklärt der Beitrag zur Indexierung.
In der Praxis: PWA als Teil Ihrer Web-Anwendung
Kundenportale, Fachanwendungen für den Außendienst oder Dashboards, die SEODACH für Mittelständler entwickelt, lassen sich von Anfang an als PWA anlegen. Ein erstes Ergebnis zum Durchklicken sehen Sie nach 14 Tagen, der erste Baustein läuft in der Regel nach 2–6 Wochen – auf dem Smartphone Ihrer Mitarbeitenden genauso wie am PC. Betrieben wird auf Servern in Deutschland, der Code gehört Ihnen. Mehr dazu unter Web-Anwendungen.
Ob eine PWA reicht oder eine native App nötig ist, klären wir vor dem Projekt anhand der Gerätefunktionen, die Ihre Anwendung wirklich braucht. So zahlen Sie nicht für zwei Apps, wenn eine Web-Anwendung den Zweck erfüllt.
Häufige Fragen
Funktioniert eine PWA auf dem iPhone?
Ja. Nutzer installieren sie über „Zum Home-Bildschirm“ im Browser. Einige Funktionen sind auf iOS eingeschränkter als auf Android, daher lohnt ein kurzer Check, welche Ihre Anwendung braucht.
Kann eine PWA in den App Store?
Grundsätzlich wird eine PWA über das Web verteilt. Mit zusätzlichem Aufwand lässt sie sich in eine App-Hülle verpacken und in die Stores bringen, falls das für Ihre Zielgruppe wichtig ist.
Ist eine PWA gut für SEO?
Ja, wenn sie sauber gebaut ist. Weil eine PWA eine Website ist, können Suchmaschinen ihre öffentlichen Inhalte finden und indexieren – anders als bei einer nativen App.
Brauchen Sie Unterstützung?
Unsere Experten helfen Ihnen, die richtigen SEO- und Digitalstrategien für Ihr Unternehmen umzusetzen.
Erstgespräch vereinbarenWeitere Artikel im Wiki-Lexikon
Was ist ein Headless CMS?
Ein Headless CMS trennt Inhalte von der Darstellung und liefert sie per API aus. Wie es funktioniert, wann es sich lohnt und wann WordPress reicht.
Begriff öffnenWas ist Scrum?
Scrum einfach erklärt aus Sicht des Auftraggebers: Rollen, Sprints, Ereignisse und was Sie als Product Owner tun. Mit Vergleich zum Festpreis-Projekt.
Begriff öffnenWas ist CI/CD?
CI/CD steht für Continuous Integration und Continuous Delivery: Änderungen werden automatisch geprüft und ausgeliefert. So läuft eine CI/CD-Pipeline.
Begriff öffnenWas ist DevOps?
DevOps einfach erklärt: Entwicklung und Betrieb arbeiten als ein Team, Abläufe sind automatisiert. Prinzipien, Beispiele und was Auftraggeber davon haben.
Begriff öffnen