Funktionsweise einer Progressiven Web App

article.detail.published-on:

June 22, 2021

article.detail.reading-time:

article.detail.minutes

article.detail.tags:

Progressive Web Apps sind Alleskönner, denn sie bieten zahlreiche Nutzungsmöglichkeiten, die sich mit relativ geringem Kostenaufwand realisieren lassen.

Sollen Apps schnell und günstig zur Verfügung stehen, sind PWAs eine gute Lösung. PWAs eignen sich besonders für die Entwicklung kleiner Apps, die im Rahmen bestimmter Verkaufs- oder Kundenaktionen innerhalber kurzer Zeit zur Verfügung stehen sollen. Mitarbeiter aus dem Vertrieb freuen sich über die Webanwendung in Form eines Katalogs für die zu präsentierenden Produkte oder für die Leadgenerierung. Dank einer PWA können Mitarbeiter von überall aus auf unternehmensinterne Daten zugreifen und diese bearbeiten oder erstellen.

Der Vorteil einer PWA ist dabei ihre schnelle und durchaus kostengünstige Entwicklung.

Der technische Background solcher Anwendungen

Um die Merkmale einer Progressiven Web App zu erfüllen, sollte die Anwendung auf drei technischen Säulen basieren.

Laden mit HTTPS

Die Anwendung muss mit HTTPS geladen werden, d.h. die Bereitstellung der PWA kann ausschließlich über ein sicheres Netzwerk erfolgen. Die Anwendung gilt damit als vertrauenswürdige Website. Zudem ist der Großteil der Funktionen ohnehin erst im Rahmen eines sicheren Netzwerks verfügbar.

Service Worker als Basis

Progressive Web Apps basieren auf sogenannten Service Workern. Service Worker sind JavaScripte, die Inhalte im Hintergrund laden können. Dies ermöglicht es der Anwendung, auch im Offline-Modus dem User mit allen Funktionen zur Verfügung zu stehen. Der Servicemitarbeiter steuert die Verarbeitung von Netzwerkanforderungen und das Zwischenspeichern von Assets. Solche Assets sind dafür zuständig, dass eine Website – in diesem Fall eine PWA – korrekt ausgeführt wird und ansprechend aussieht. Service Worker ermöglichen die Entwicklung von schnellen Websites und Offline-Erlebnissen wie PWAs und gewährleisten zudem geringe Ladezeiten von Seiten. Sie stellen mithilfe sogenannter Application Shells sicher, dass die Webanwendungen zuverlässig mit unterschiedlichen Browsern funktionieren. Application Shells liefern das Grundgerüst für dynamische Inhalte. Daher ist sie auch verantwortlich dafür, dass die PWA den Look einer nativen App annimmt.

Das Web App Manifest

Als dritte und ebenso wichtige Säule ist die Manifestdatei zu nennen. Sie stellt sicher, dass PWAs von Endgeräten erkennbar sind und steuert, wie die PWA dem User ausgespielt wird. Dies inkludiert den Namen der App, die Start-URL, Symbole und weitere technische Informationen, die für die Umwandlung einer Website in eine Web App notwendig sind. Das Web App Manifest ermöglicht die Installation der Application Shell und stellt weitere Informationen zur Verfügung. Dazu gehört unter anderem die Versendung von Push Nachrichten an den User, das Aussehen und die genauen Funktionen der App sowie das Laden ohne oder mit Browser.