Progressive Web-Anwendungen (PWA) Schulung für Einsteiger

PWA einordnen: erste Schritte

• Was eine PWA ausmacht: per URL erreichbar, installierbar, offlinefähig
• PWA oder native App: Gerätezugriff, Store-Vertrieb, Updates und Kosten
• Eine erste PWA: HTML-Gerüst, Manifest, Service Worker, lokaler Server
• Kernbausteine: HTTPS, Manifest, Service Worker, Cache API, IndexedDB
• PWA und SPA abgrenzen: auch mehrseitige Anwendungen können PWAs sein
• Progressive Verbesserung und Feature Detection
• Sicherer Kontext: HTTPS-Pflicht und localhost als Ausnahme

Web App Manifest und Installation

• Aufgabe des Web App Manifests und Einbindung per <link rel="manifest">
• Kerneigenschaften: name, short_name, start_url, display, icons
• Weitere Eigenschaften: scope, theme_color, background_color
• Neuere Felder: id, display_override, shortcuts, screenshots
• Maskierbare Icons und Icon-Größen je Plattform
• Installation je Browser: Chrome, Edge, Safari sowie Firefox unter Android und Windows
• Chrome-Entwicklerwerkzeuge: Manifest im Application-Panel prüfen
• Android-Emulator für PWA-Tests einrichten
• Installationskriterien und eigener Button mit beforeinstallprompt
• Safari: apple-touch-icon, Statusleiste, Home-Bildschirm und Dock
• Installierte PWA auf dem Desktop: Fenster, Startmenü, Deinstallation

Service Worker: Lebenszyklus und Ereignisse

• Möglichkeiten: Netzwerk-Proxy, Offline-Betrieb, Push, Hintergrundaufgaben
• Ereignisse: install, activate, fetch, message, push, sync
• Lebenszyklus: Installieren, Warten, Aktivieren, Beenden
• Browser-Unterstützung prüfen mit 'serviceWorker' in navigator
• Registrieren mit navigator.serviceWorker.register() und Scope
• Auf Ereignisse reagieren: event.waitUntil() und event.respondWith()
• Aktualisieren: skipWaiting(), clients.claim() und Hinweis auf neue Version
• Nicht-Lebenszyklus-Ereignisse: message und postMessage
• Service Worker als ES-Modul registrieren (type: "module")
• Navigation Preload: Anfrage parallel zum Start des Service Workers
• DevTools per chrome://inspect mit Gerät oder Emulator verbinden
• Test auf realem Gerät per Portweiterleitung
• Safari Web Inspector für iPhone und iPad
• Typische Fehler: falscher Scope, hängende alte Version, „Update on reload“

Asynchrones JavaScript, Promises und Fetch API

• Asynchroner Code: Event Loop und warum Service Worker nur asynchron arbeiten
• Promises: Zustände, then() und Promise.all()
• Promises verwerfen: reject, catch() und finally()
• async/await im Service-Worker-Code
• Fetch-Grundlagen: Request, Response, Header, Body
• Anfragen senden: GET, POST mit JSON, AbortController
• Fetch und CORS: Preflight, mode und opake Antworten im Cache
• Fetch statt XMLHttpRequest: Ajax-Bestandscode umstellen
• Fetch API im Service Worker: Anfragen abfangen
• Antworten mit response.clone() doppelt nutzen

Cache API und Cache-Verwaltung

• Warum Caching: Ladezeit, Offline-Betrieb, Datenvolumen
• Cache API verstehen: caches.open(), put(), match(), delete()
• Browser-Unterstützung und Kontingent mit navigator.storage.estimate()
• Cache-bare Elemente identifizieren
• Pre-Caching der App-Shell im install-Ereignis
• Elemente aus dem Cache abrufen
• Mehrere Dateien mit cache.addAll() – warum eine fehlende Datei alles abbricht
• Grundlagen des dynamischen Cachings
• Dynamisches Caching implementieren
• Fehlerbehandlung bei Netz- und Cache-Zugriffen
• Cache-Versionierung über Cache-Namen
• Alte Cache-Versionen in activate bereinigen
• Cache-Verwaltung: Größenlimit und Ablaufzeiten
• Persistenten Speicher mit navigator.storage.persist() anfordern

Caching-Strategien

• Offline-Fallback-Seite bereitstellen
• Cache bei Bedarf, etwa „Später lesen“
• Cache First mit Netzwerk-Fallback
• Nur Cache: für versionierte, vorab gespeicherte Assets
• Nur Netzwerk: für Anfragen, die nie aus dem Cache kommen dürfen
• Network First mit Cache-Fallback
• Cache, dann Netzwerk
• Cache, dann Netzwerk mit dynamischem Caching
• Cache, dann Netzwerk mit Offline-Unterstützung
• Stale-While-Revalidate für häufig genutzte Ressourcen
• Strategien je Route im fetch-Handler nach URL und request.destination
• Cache bereinigen und säubern
• Service Worker freigeben, deregistrieren, fehlerhafte Versionen abschalten
• Range-Anfragen für Audio und Video

Dynamische Daten mit IndexedDB

• IndexedDB: Object Stores, Indizes, Transaktionen
• Dynamisches Caching versus Speichern dynamischer Inhalte
• Browser-Unterstützung von IndexedDB
• Bibliothek idb einbinden
• Geholte Daten in IndexedDB speichern
• IndexedDB im Service Worker verwenden
• Daten lesen, über Indizes abfragen
• Löschen und Abweichungen zwischen Server und Client
• Datenbank leeren
• Einzelne Einträge löschen
• IndexedDB und Caching-Strategien kombinieren
• Schemamigration mit Versionsnummern
• Origin Private File System für große Dateien

Responsive, app-artige Benutzeroberfläche

• Responsive Design mit Flexbox und Grid
• Media Queries und display-mode: standalone
• Responsive Bilder mit srcset und <picture>
• Animationen und prefers-reduced-motion
• Viewport, Skalierung und env(safe-area-inset-*)
• App-Shell-Muster
• View Transitions API: Seitenwechsel im Dokument überall, dokumentübergreifend in Chromium und Safari

Hintergrund-Synchronisation

• Wie Background Sync funktioniert
• Grundeinstellungen und Prüfung auf SyncManager
• Aufgabe mit registration.sync.register() anmelden
• Ausstehende Daten in IndexedDB (Outbox-Muster)
• Fallback ohne Background Sync: beim nächsten Start oder online-Ereignis senden
• Daten im sync-Ereignis senden
• Periodische Synchronisierung und ihre Grenzen
• Serverseitiger Endpunkt, idempotent verarbeitet
• Fehler beheben: Wiederholungen und Konflikte

Benachrichtigungen und Web Push

• Wie Push API, Notifications API und Push-Dienst zusammenspielen
• Browser-Unterstützung; auf iPhone und iPad nur für installierte Web-Apps
• Berechtigung nach einer Nutzeraktion anfragen
• Benachrichtigungen anzeigen
• Benachrichtigungen mit showNotification()
• Optionen: body, icon, badge, tag, data
• Aktionen zu Benachrichtigungen hinzufügen
• Auf notificationclick reagieren
• Von Benachrichtigungen zu Push-Mitteilungen
• Abonnement mit pushManager.subscribe() und VAPID
• Abonnements speichern, abgelaufene entfernen
• Server und Client verbinden
• Push-Nachrichten senden mit web-push (Node.js)
• Push-Nachrichten im push-Ereignis anzeigen
• Test auf Android-Gerät und iPhone
• Seite bei Klick öffnen mit clients.openWindow()
• Badging API: navigator.setAppBadge()

Zugriff auf native Gerätemerkmale

• DOM-Zugriff und Feature Detection
• Kamerazugriff mit getUserMedia()
• Bild per Canvas aufnehmen und hochladen
• Kamera und Upload testen
• Fallback mit <input type="file" capture>
• Position mit der Geolocation API
• Fehler: verweigerte Berechtigung, Zeitüberschreitung
• Test auf realem Gerät
• Web Share API und Share Target
• Screen Wake Lock und File System Access

Workbox, Build-Werkzeuge und Frameworks

• Workbox-Grundlagen und Module
• Installation: workbox-build, CLI oder Bundler-Plugin
• Konfiguration: generateSW oder injectManifest
• Eigenen Service Worker anpassen
• Routing mit registerRoute()
• Dynamisches Caching mit ExpirationPlugin
• Strategien CacheFirst, NetworkFirst und Optionen
• Eigene Handler für IndexedDB
• Offline-Fallback mit workbox-recipes
• workbox-background-sync und Push
• Dokumentation und workbox-window
• Build-Workflow: Precache-Manifest mit Hashes
• Prüfung mit Lighthouse und DevTools
• SPAs als PWA: Routing und Deep Links
• React mit Vite und vite-plugin-pwa
• Angular mit ng add @angular/pwa
• Vue mit Vite und vite-plugin-pwa
• App-Stores: Trusted Web Activity und PWABuilder

PWA-Entwicklung mit Coding-Agenten

• Caching-Strategie je Route als Tabelle vorgeben, die der Agent in Service-Worker- oder Workbox-Code übersetzt
• Regel für den Agenten: jede Service-Worker-Änderung nur mit neuer Cache-Version und Aufräumen im activate-Handler
• Playwright-Tests mit context.setOffline(true) als Abnahme für den Offline-Betrieb der PWA
• Manifest und Icon-Sätze generieren lassen, Kontrolle im Application-Panel und auf echtem Gerät
• VAPID-Schlüssel und Push-Abonnements aus Prompts, Logs und Repository heraushalten

Praxisprojekt: offlinefähige Prüf-App für den Außendienst

• Prüfprotokolle mit Fotos ohne Netz erfassen und in IndexedDB ablegen
• Übertragung per Background Sync, mit Fallback für Safari und Firefox
• Push-Benachrichtigung bei neuen Prüfaufträgen, App-Badge mit offenen Aufträgen
• Installation auf Android, iPhone und Desktop, Offline-Abnahme mit Playwright

Lernziele

• Sie schreiben ein Web App Manifest, das die Installationskriterien von Chrome, Edge und Safari erfüllt
• Sie implementieren einen Service Worker mit versioniertem Cache und kontrolliertem Update
• Sie wählen je Ressource eine passende Caching-Strategie und begründen die Wahl
• Sie speichern Offline-Daten in IndexedDB und synchronisieren sie mit Background Sync oder Fallback
• Sie richten Web Push mit VAPID-Schlüsseln ein und testen es auf Android und iPhone

Zielgruppe

• Webentwickler:innen mit JavaScript-Grundkenntnissen, die ihre Anwendung offlinefähig und installierbar machen wollen
• Teams, die abwägen, ob eine PWA eine native Android- und iOS-App ersetzen kann
• Frontend-Entwickler:innen mit React, Angular oder Vue, die PWA-Funktionen in bestehende Projekte einbauen