Progressive Web Apps (PWA)
Dieser Beitrag ist eine Begriffserklärung zu Progressive Web Apps – inklusive Prüfungsfragen und Tags.
In a Nutshell
PWA sind Webanwendungen, die sich wie native Apps verhalten – inklusive Offline-Funktion, Installation und Push-Benachrichtigungen.
Kompakte Fachbeschreibung
Progressive Web Apps kombinieren die Offenheit des Webs mit Funktionen nativer Apps. Sie laufen im Browser, können aber auf dem Homescreen installiert werden, arbeiten offline durch Service Worker und bieten Push-Notifications, Caching und Daten-Synchronisierung. Voraussetzung: responsives Design, HTTPS, Web App Manifest und Service Worker. PWAs nutzen moderne Web-APIs für plattformunabhängiges App-ähnliches Verhalten.
Prüfungsrelevante Stichpunkte
- PWA = Web-App mit nativen Funktionen
- Erfordert HTTPS, Service Worker, Web App Manifest
- Offlinefähigkeit durch Caching (Cache API)
- Keine App-Store-Veröffentlichung nötig (IHK-relevant)
- Kann als Icon installiert werden (Praxisbezug)
- Service Worker können Sicherheitsrisiken bergen (Sicherheitsaspekt)
- Spart Entwicklungskosten für iOS & Android getrennt (Wirtschaftlichkeit)
- Technische Anforderungen und Manifest-Daten müssen dokumentiert werden (Dokumentationspflicht)
Kernkomponenten
- HTML, CSS, JavaScript
- Service Worker (Hintergrundprozesse)
- Web App Manifest (.webmanifest-Datei)
- Cache-Strategien (Network First, Cache First)
- Responsive Design
- HTTPS-Pflicht
- Push Notifications
- Hintergrundsynchronisation
- Installierbarkeit (Add to Homescreen)
- Progressive Enhancement-Prinzip
Praxisbeispiel
// manifest.json
{
"name": "Meine PWA",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{ "src": "icon.png", "sizes": "192x192", "type": "image/png" }
]
}
Erklärung: Dieses Manifest ermöglicht, dass die PWA wie eine native App auf dem Gerät erscheint – mit eigenem Icon und Startverhalten.
Vorteile und Nachteile
Vorteile
- Plattformunabhängig
- Offlinefähig
- Kein App-Store nötig
- Schneller Entwicklungszyklus
Nachteile
- Eingeschränkter Hardwarezugriff (z.B. Bluetooth, NFC)
- iOS-Support teilweise eingeschränkt
- Kein Store-Marketing (Rankings, Bewertungen)
Typische Prüfungsfragen (mit Kurzantwort)
- Was ist eine PWA? Webanwendung mit App-Funktionen wie Offline, Push, Installation.
- Technische Komponenten? Service Worker, Web App Manifest, HTTPS.
- Installation? Über Browser mit “Zum Startbildschirm hinzufügen”.
- Vorteil gegenüber nativen Apps? Kein Store nötig, schneller, plattformunabhängig.
- Offline-Nutzung? Über Caching durch Service Worker und Cache API.
- Web App Manifest? JSON-Datei mit App-Name, Start-URL, Icon.
- Zwingende Sicherheitsanforderung? HTTPS-Verbindung.
- Warum wirtschaftlich interessant? Ein Codebase für mehrere Plattformen, keine Storegebühren.
Wichtigste Quellen
- https://web.dev/progressive-web-apps/
- https://developer.mozilla.org/de/docs/Web/Progressive_web_apps
- https://codelabs.developers.google.com/codelabs/your-first-pwapp/