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.


Begriff / Definition


Der Begriff „Progressive Web App“ setzt sich zu einem Teil aus den Web Apps (dt. Webanwendungen) zusammen, die mit Hilfe der Webtechniken HTML, CSS und JavaScript entwickelt werden. Der andere Teil ergibt sich aus dem Begriff des Progressive Enhancement, der im Jahre 2003 von Steven Champeon vorgestellt wurde. Dabei handelt es sich um eine Methode zur Entwicklung von Webseiten, die verlangt, dass die grundlegenden Funktionen einer Webanwendung in jedem Browser lauffĂ€hig sind. Neuartige Funktionen sollen nur dann zur Verbesserung der Nutzererfahrung verwendet werden, wenn sie vom Browser unterstĂŒtzt werden. Dieses Vorgehen ist nötig, weil Progressive Web Apps u. a. Service-Worker-Techniken verwenden, die nur in modernen Browsern funktionsfĂ€hig sind.

Die folgende Definition fasst alle relevanten Eigenschaften von Progressive Web Apps zusammen:

Funktionsweise


Eine Progressive Web App wird gestartet, indem man z. B. im Browser den URL des Webservers eingibt und damit die erste Anfrage sendet.
Der Webserver nimmt die Anfrage entgegen und ĂŒbergibt sie an die PWA, die hier als eine Webanwendung fungiert. Diese erzeugt oder lĂ€dt den HTML-Quellcode einer Webseite, der vom Webserver zurĂŒck zum Browser des Benutzers geschickt wird (HTTPS-Response).

Der Nutzer sieht eine Webseite, die aufgrund des responsiven Designs an sein EndgerĂ€t angepasst ist. Obwohl die Progressive Web App ĂŒber einen URL abgerufen wurde, kann der Benutzer ein Icon auf den Bildschirm des Smartphones ziehen oder Push Notifications erhalten und die Seite auch offline verwenden.
Die auf Progressive enhancement beruhende Technik soll Nutzern je nach verwendetem GerÀt die bestmögliche User Experience bieten.

Technisch wird dies mit HTML5, CSS3, JavaScript, Service Worker und optional einem Framework wie Angular bzw. einer Bibliothek wie Polymer umgesetzt.
Zugriffe auf das native Dateisystem oder das Adressbuch sind mit Progressive Web Apps erst in Testversionen wie Google Chromium möglich.


Service Worker


Ein Service Worker ist ein JavaScript, das ein Web-Browser im Hintergrund ausfĂŒhrt. Es stellt fĂŒr Progressive Web Apps essentielle Funktionen wie das Caching fĂŒr die Offline-Verwendbarkeit bereit. Einmal online abgerufen, können Inhalte beim nĂ€chsten Besuch der Seite auch ohne Internetverbindung angezeigt werden (Offline-Betrieb). Auch von nativen Apps bekannte Push-Benachrichtigungen sind mit Service Workern möglich. Service Worker werden eigens programmiert, im JavaScript der Seite registriert und installiert. Service Worker bedingen HTTPS, weshalb jede Progressive Web App mit HTTPS lĂ€uft. Zahlreiche Frameworks, wie z. B. Angular mit dem Mobile Toolkit, stellen Service Worker bereit, so dass man diese nicht selbst entwickeln muss.


App Shell


App Shell (oder Anwendungs-Shell) ist das minimale HTML, CSS und Java Script, das fĂŒr das korrekte Laufen des User Interfaces der progressiven App benötigt wird. Das erste Laden der Shell sollte sehr schnell sein und sofort gecached werden. Das bedeutet, dass die Shell Dateien einmal ĂŒber das Netzwerk lĂ€dt und sodann in einem lokalen Repository (Cache) speichert. FĂŒr jedes weitere Öffnen der App sind dann nur noch die lokal vorliegenden Daten notwendig.

Die Architektur der Anwendungs-Shell trennt das Core der Anwendungsinfrastruktur und das User Interface von den Daten. User Interface und Infrastruktur werden durch Benutzen des Service Worker lokal gecached, jedes andere Laden der App lÀdt nur die benötigten anstelle von allen Daten.

Der Zweck von Anwendungs-Shell ist vergleichbar mit dem Hochladen eines App Packages im App Store, wenn man eine native App entwickelt.


Charakteristik


ZusĂ€tzlich zu ihren Eigenschaften als Webseiten stellen Progressive Web Apps viele Sonderfunktionen zur VerfĂŒgung, die zuvor nur von nativen Apps bekannt waren.


Add-To-Homescreen/Installierbarkeit


Eine Progressive Web App kann ĂŒber „Add-To-Homescreen“ installiert werden. Die Manifest-Datei wird dabei verwendet um z. B. einen Splash Screen mit Icon zu erzeugen.

Im Browser erscheint entweder eine Benachrichtigung zur Installationsbereitschaft (auf mobilen GerĂ€ten) oder im Browser-MenĂŒ oder der URL-Zeile eine Funktion zum Installieren.


Push Notifications


Push Notifications sind ebenfalls von nativen Apps bekannt. Betreiber der Progressive Web App kö

















Ich stimme der Verwendung von Cookies fĂŒr die Zwecke der Webanalyse und digitaler Werbemaßnahmen zu. Auch wenn ich diese Website weiter nutze, gilt dies als Zustimmung. Meine Einwilligung kann ich jederzeit widerrufen. Weitere Informationen finde ich in der DatenschutzerklĂ€rung.

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close