Skip to content
IRC-Coding IRC-Coding
PWA Progressive Web Apps Service Worker Web App Manifest Offline Push Notifications HTTPS

Progressive Web Apps (PWA) einfach erklärt: Service Worker, Manifest, Offline-Fähigkeit

PWA sind Web-Apps mit nativen Funktionen: Offline durch Service Worker, Installation via Web App Manifest, Push-Notifications, HTTPS-Pflicht.

S

schutzgeist

2 min read

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

  1. HTML, CSS, JavaScript
  2. Service Worker (Hintergrundprozesse)
  3. Web App Manifest (.webmanifest-Datei)
  4. Cache-Strategien (Network First, Cache First)
  5. Responsive Design
  6. HTTPS-Pflicht
  7. Push Notifications
  8. Hintergrundsynchronisation
  9. Installierbarkeit (Add to Homescreen)
  10. 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)

  1. Was ist eine PWA? Webanwendung mit App-Funktionen wie Offline, Push, Installation.
  2. Technische Komponenten? Service Worker, Web App Manifest, HTTPS.
  3. Installation? Über Browser mit “Zum Startbildschirm hinzufügen”.
  4. Vorteil gegenüber nativen Apps? Kein Store nötig, schneller, plattformunabhängig.
  5. Offline-Nutzung? Über Caching durch Service Worker und Cache API.
  6. Web App Manifest? JSON-Datei mit App-Name, Start-URL, Icon.
  7. Zwingende Sicherheitsanforderung? HTTPS-Verbindung.
  8. Warum wirtschaftlich interessant? Ein Codebase für mehrere Plattformen, keine Storegebühren.

Wichtigste Quellen

  1. https://web.dev/progressive-web-apps/
  2. https://developer.mozilla.org/de/docs/Web/Progressive_web_apps
  3. https://codelabs.developers.google.com/codelabs/your-first-pwapp/
Zurück zum Blog
Share:

Ähnliche Beiträge