- Coach
- Manuel Stamm
- Termin
- Dienstag, 21. Juli 2026, 12:30 Uhr
- Dauer
- ~120 Minuten
- Raum
- 3.215
Progressive Web Apps: Von der Webanwendung zur installierbaren, offlinefähigen App
Progressive Web Apps (PWAs) verbinden die Reichweite des Webs mit app-ähnlichen Fähigkeiten wie Installierbarkeit und resilientes Verhalten unter schlechten Netzbedingungen. Im Mittelpunkt stehen dabei Web App Manifest, Service Worker, Offline-Fähigkeit und Installierbarkeit -> technische Bausteine, die sich nachträglich in bestehende Webanwendungen integrieren lassen.
Dieser Workshop ist für 120 Minuten ausgelegt und verbindet einen kompakten Theorieblock mit einer praxisnahen Hands-on-Phase. Ausgangspunkt ist eine kleine Demo-App, an der Installierbarkeit, App Shell und Offline-Verhalten Schritt für Schritt nachvollziehbar werden.
Zielsetzung und Inhalte
Nach dem Workshop könnt ihr:
- erklären, was eine Progressive Web App von einer klassischen Webanwendung unterscheidet und welche technischen Voraussetzungen für eine installierbare PWA erfüllt sein müssen
- eine Webanwendung um ein gültiges Web App Manifest erweitern und die Installierbarkeit im Browser prüfen
- einen Service Worker registrieren und statische Assets mit einer einfachen Caching-Strategie vorladen
- die Anwendung mit DevTools, Cache Storage und Lighthouse analysieren und debuggen
- Caching-Entscheidungen (z. B. cache-first vs. network-first) begründen und typische Grenzen von PWAs einordnen
Zielgruppe
Dieser Workshop richtet sich an Master-Studierende im Bereich Web-Technologien mit soliden Grundlagen in HTML, CSS und JavaScript. Das Format fokussiert weniger auf GUI-Klickpfade und stärker auf Architektur, Tooling und technische Entscheidungen.
Vorkenntnisse
- Solide Grundlagen in HTML, CSS und JavaScript
- Grundverständnis von Webanwendungen und Browser-DevTools ist hilfreich
- Kein Framework-Wissen erforderlich
Technische Voraussetzungen
Bitte vor dem Workshop installieren:
- Aktueller Browser mit Service-Worker- und Manifest-Unterstützung (optimal: Chrome bzw. Chromium-basierter Browser für direkte Lighthouse-Integration)
- IDE oder Code-Editor (z. B. VS Code)
- Node.js inklusive npm (zum lokalen Starten der Demo-App)
Material & Dokumentation
