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-Programm, 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


Die App Shell (oder Anwendungs-Shell) ist die minimale HTML, CSS und Javascript Umgebung, die f√ľr die Darstellung und Ausf√ľhrung 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 Ap


















Metaprime Studio

Send a

message

Wir sind hier, um jede Ihrer Fragen zu beantworten.

Email : info@metaprime.at

Send a

message

Wir sind hier, um jede deiner Fragen zu beantworten.

Email : info@metaprime.at

Kostenloses Website Strategiegespr√§ch‚Äč

In einem kostenlosen Web Strategiegespräch, decken wir ungenutztes Potenziale Ihrer Webseite auf und erarbeiten eine Strategie, damit Du mit Deiner Webseite auf Google erfolgreicher wirst