PWA

"Eine Progressive Web App (▸ PWA) ist eine Website, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Sie kann daher auch als Symbiose aus einer responsiven Webseite und einer App beschrieben werden. Progressive Web Apps können wie eine Webseite mit HTML5, CSS3 und JavaScript erstellt werden. Zusätzlich dienen sogenannte Service Worker durch optimiertes Caching den Offline-Funktionalitäten. Zur Kommunikation zwischen Webclient und Webserver ist das HTTPS-Protokoll vorgeschrieben."

Mehr und mehr Menschen nutzen das Smartphone, um auf das Internet zuzugreifen. In Deutschland betraf der Anteil der Internetnutzer via Smartphone schon im Jahr 2014 etwa 69% aller Internetnutzer. Bisher bestand das Problem für Webseitenbetreiber darin, dass sowohl eine responsive oder mobile Webseite als auch zusätzlich eine native App entwickelt werden musste, wollte man sich am Markt behaupten. Eine PWA soll die doppelte Entwicklung überflüssig machen, da sie wie eine Webseite mittels URL aufgerufen werden kann und gleichzeitig Offline-Funktionalitäten bereitstellt.

---

Lass' dir von claude.ai (es muss ja nicht immer ChatGPT sein) zuerst eine minimale ▸ manifest.json und grad auch noch eine service-worker.js schreiben - oder kopiere die beiden Dateien dieser Subdomain in deine Domain. Achte darauf, dass du sie in der obersten Ebene belässt. Dann verlinkst du die manifest.json in deiner index-Datei. Ist deine Website ein OnePager und besteht somit aus einer einzigen Webseite, musst du in der manifest.json nur die index-Datei und die Bilder erwähnen, die in der PWA angezeigt werden sollen. Sonst führst du alle Seiten auf, die in der PWA gespielt werden sollen.

Vor der Präsentation deiner PWA rufts du sie online auf und fügst sie deinem Home-Bildschirm bei. Dann öffnest du sie, immer noch online, und blätterst alle Seiten durch, die während der Präsentation gespielt werden sollen. Dann gehst du offline und rufst die PWA über das dem Home-Bildschirm hinzugefügte Icon auf. Thats all. Beachte: schaltest du nach diesem Prozedere, aber vor der Präsentation aus und wieder ein, musst du das Prozedere wiederholen.

▲