Add PWA Workshop (#136)

_workshops/2024/PWAs/index.md

@@ -0,0 +1,64 @@
+---
+layout: workshop
+titel: Progressive Web Apps
+social-media-untertitel: Workshop am 9. Juli 2024
+datum: 2024-07-09
+modul: wt
+published: true
+autor: Oliver Wichmann
+bild: ../thumbnail.png
+bildcredits: DALL·E 3 (OpenAI)
+art: workshop
+termin: Dienstag, 9. Juli 2024, 13:00 Uhr
+dauer: ~120 Minuten
+raum: 3.217
+---
+
+## Ziel des Workshops
+
+In diesem Workshop lernen die Teilnehmenden, was ein Progressive Web-App (PWA) ist und was diese alles kann.
+
+Dazu werden sie Schritt für Schritt durch die notwendigen Schritte geführt, um eine installierbare und offline-fähige PWA zu erstellen.
+
+Am Ende des Workshops haben die Teilnehmenden eine einfache Web-App auf GitHub Pages deployt und in eine installierbare und offline nutzbare PWA umgewandelt.
+
+Es werden folgende Themen behandelt:
+- Was ist eine PWA?
+- Was kann eine PWA bzw. Web-App?
+- Web-Manifeste
+- Service Worker
+- Service Worker Caching
+
+## Zielgruppe
+
+Dieser Workshop richtet sich an **alle Personen**, die Interesse an der Entwicklung von modernen Webanwendungen haben und lernen möchten, wie diese als PWAs wie native Apps funktionieren können.
+
+<hr>
+
+## Vorkenntnisse:
+
+Die Teilnehmenden sollten grundlegende Kenntnisse in folgenden Bereichen besitzen:
+
+- **JavaScript**
+- **GitHub**
+- **HTML**
+- **JSON**
+
+## Technische Voraussetzungen:
+
+- **GitHub Account**
+- **Entwicklungsumgebung** (z.B. **Webstorm** o.Ä.)
+- **Smartphone**
+- **Google Chrome** (Oder anderen Chromium basierten Browser sowohl auf dem **Rechner** als auch auf dem **Smartphone**)
+- **USB-Kabel zum Verbinden des Smartphones mit dem Rechner** (optional)
+
+## Material
+
+- [**Aufgaben Repository**](https://github.com/OliverWich/WebTech2024-PWA-Workshop)
+- [**Präsentation**](https://github.com/OliverWich/WebTech2024-PWA-Workshop/blob/main/Folien.pdf)
+- Weiterführendes Material
+  - [mdn Docs zu PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
+  - [Googles Docs zu PWAs](https://web.dev/learn/pwa/service-workers?continue=https://web.dev/learn/pwa&hl=de#article-https://web.dev/learn/pwa/service-workers&hl=de)
+  - [Kurse von Google um PWAs zu lernen](https://web.dev/learn/pwa)
+  - [Rich Install UI für PWAs](https://web.dev/patterns/web-apps/richer-install-ui?hl=de)
+  - [Web-Manifest Generator](https://progressier.com/pwa-manifest-generator)