Progressive Web Apps (PWA)
Dieser Beitrag ist eine Begriffserklärung zum Thema Progressive Web Apps (PWA) – inklusive Prüfungsfragen, zentraler Merkpunkte und Tags.
In a Nutshell
Progressive Web Apps (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 und arbeiten offline über Service Worker und Caching. Typische Merkmale:
- Installierbarkeit (Add to Homescreen)
- Offline-Fähigkeit (Caching, Cache API)
- Push Notifications (je nach Plattform)
- HTTPS als Voraussetzung
- Web App Manifest mit Metadaten (Name, Icons, Start-URL)
PWAs funktionieren auf Desktop und Mobilgeräten plattformunabhängig und eignen sich besonders für schnell ladbare, netzwerkrobuste Anwendungen.
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/Manifest-Daten dokumentieren (Dokumentationspflicht)
Kernkomponenten
- HTML, CSS, JavaScript
- Service Worker (Hintergrundprozesse)
- Web App Manifest (
.webmanifest) - Cache-Strategien (Network First, Cache First)
- Responsive Design
- HTTPS-Pflicht
- Push Notifications
- Hintergrundsynchronisation
- Installierbarkeit
- Progressive Enhancement
Einfaches Praxisbeispiel (Manifest)
{
"name": "Meine PWA",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{ "src": "icon.png", "sizes": "192x192", "type": "image/png" }
]
}Erklärung: Das Manifest sorgt dafür, dass die PWA wie eine App installierbar ist (Icon, Startverhalten, Darstellung).
Vorteile und Nachteile
Vorteile
- Plattformunabhängig
- Offlinefähig
- Kein App-Store nötig
- Schneller Entwicklungszyklus
Nachteile
- Eingeschränkter Hardwarezugriff (z.B. Bluetooth/NFC teils limitiert)
- iOS-Support je nach Feature eingeschränkt
- Kein Store-Marketing (Rankings, Bewertungen)
Typische Prüfungsfragen (mit Kurzantwort)
- Was ist eine PWA? Webanwendung mit App-Funktionen wie Offline, Push und Installation.
- Welche Komponenten braucht eine PWA? Service Worker, Web App Manifest, HTTPS.
- Wie wird eine PWA installiert? Über den Browser („Zum Startbildschirm hinzufügen“).
- Wie funktioniert Offline-Nutzung? Über Caching-Strategien im Service Worker.
- Warum sind PWAs wirtschaftlich interessant? Eine Codebase für mehrere Plattformen, keine Storegebühren.
Glossar
| Begriff | Definition |
|---|---|
| Progressive Web App | Web-App mit nativen Funktionen (Offline, Push, Installation) |
| Service Worker | Script im Hintergrund für Caching/Netzwerksteuerung |
| Web App Manifest | JSON-Metadaten zur Installierbarkeit der PWA |
Freie Antwort
PWAs sind besonders sinnvoll für Informationsdienste, Newsportale oder Webshops, bei denen schnelle Ladezeiten, Offline-Fähigkeit und einfache Verteilung zählen. Für Prüfungen ist wichtig: PWAs sind mehr als „mobile Webseiten“, weil sie echte App-Features (v.a. Service Worker + Manifest) mitbringen.
Lernstrategie für dieses Thema
- Verständniseinstieg: Installiere eine PWA (z.B. Twitter Lite) und teste Offline-Verhalten.
- Vertiefungsmethode: Baue eine Mini-PWA mit Manifest und einfachem Service Worker.
- Prüfungsfokustraining: Übe, PWA vs. native vs. hybrid zu argumentieren.
- Fehlervermeidung: HTTPS nicht vergessen – Service Worker funktionieren sonst nicht.
Themenanalyse
- Technischer Kern: Service Worker, Manifest, Caching
- Implementierungsherausforderungen: Cache-Strategien, Push-Dienste, Browser-Support
- Sicherheitsimplikationen: HTTPS, kontrollierter Ressourcen-Zugriff
- Dokumentationspflichten: Manifest-Inhalte, Offline-Konzept
- Wirtschaftliche Bewertung: Kosteneffizienz, Reichweite, Wartbarkeit