Progressive Web App

  1. Startseite
  2. Programmierung
  3. Progressive Web App

Eine Progressive Web App (kurz auch: PWA) ist eine Webseite mit zahlreichen Charakteristiken einer nativen App. Sie kann daher auch als Symbiose aus einer responsiven Webseite und einer App beschrieben werden. Progressive Web können wie eine Webseite einfach mit , CSS3 und realisiert werden. Zusätzlich dienen sogenannte Service Worker durch optimales Caching der Offline-Funktionalitäten. Zur Kommunikation zwischen Webclient und Webserver muss zwingend das HTTPS- eingesetzt werden.

Progressive Web Apps schließen damit eine lang bekannte Lücke innerhalb des “Mobile First”-Ansatzes. Mehr und mehr Menschen nutzen das Smartphone, um ins Internet zu gehen. In Deutschland betraf der Anteil der Internetnutzer via Smartphone im Jahr 2014 genau 69 % aller Internetuser. 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 macht die doppelte überflüssig, da sie wie eine Webseite mittels URL aufgerufen werden kann und gleichzeitig offline Funktionalitäten bereitstellt.

Funktionsweise

Der Benutzer startet eine Progressive Web App, indem er z. B. in einem die URL des Webservers eingibt und damit die erste Anfrage sendet. Der Webserver nimmt diese Anfrage entgegen und übergibt sie an die PWA, die hier zunächst wie eine fungiert. Dieses generiert oder lädt daraufhin den -Quellcode einer Webseite, welche vom Webserver zurück an den Browser des Benutzers geschickt wird (HTTPS-Response).

Der Nutzer sieht eine Webseite, die aufgrund des responsiven Designs perfekt an sein Endgerät angepasst ist. Obwohl die Progressive Web App über eine URL abgerufen wurde, kann der Benutzer aber ein Icon auf seinen HomeScreen des Smartphones ziehen oder Push Notifications erhalten und die Seite auch offline verwenden. Die auf Progressive enhancement beruhende Technologie ermöglicht jeden Nutzer, entsprechend seinen technischen Möglichkeiten, die bestmögliche User Experience. Technisch wird dies mit HTML5, CSS3, JavaScript, Service Worker und optional einem Framework wie Angular bzw. einer Bibliothek wie Polymer realisiert.

Service Worker
Ein Service Worker ist ein JavaScript, das von Web-Browsern im Hintergrund ausgeführt wird. Es stellt die für eine Progressive Web App essentiellen Funktionalitäten wie Caching zur Offline-Verwendbarkeit zur Verfügung. Einmal online aufgerufen, können die Inhalte beim nächsten Besuch die Seite auch dann angezeigt werden, wenn eine schlechte oder sogar gar keine Internetverbindung besteht (Offline-Betrieb). Auch die von nativen Apps bekannten Push-Benachrichtigungen sind mit Service Workern möglich. Service Worker müssen eigens programmiert, im JavaScript der Seite registriert und anschließend installiert werden. Service Worker bedingen HTTPS, weshalb auch jede Progressive Web App mit HTTPS läuft. Zahlreiche Frameworks, wie z.B. Angular mit dem Mobile Toolkit stellen bereits Service Worker bereit, sodass diese nicht zwingend selbst entwickelt werden müssen.

Charakteristik

Trotz ihrer primären Identität als Webseiten stellen Progressive Web Apps viele hilfreiche Sonderfunktionen zur Verfügung, die bisher nur von nativen Apps bekannt waren.

Add-To-Homescreen
Die Add-To-Homescreen Funktionalität kann mit den meisten Webbrowsern über das Burger Icon abgerufen werden. Hat ein Nutzer eine Progressive Web App geöffnet und fügt diese seinem Homescreen auf dem Handy hinzu, sieht er oder sie ein für die PWA spezifisches Icon. Mit einem Klick auf das Symbol wird die PWA geöffnet, auch wenn der Nutzer offline ist. Die Add-To-Homescreen Funktion hat einige Vorteile: die Hürde für Nutzer ist bedeutend geringer als eine App zu installieren und Speicherplatz zu verschwenden. Die Kundenbindung ist aber ähnlich hoch wie beim Herunterladen einer nativen App.

Push Notifications
Push Notifications sind ebenfalls von nativen Apps bekannt. Inhaber der Progressive Web App können Nutzer damit auf Aktionen, Rabatte oder spezielle Events aufmerksam machen und so die Interaktionsrate steigern.

Offline Funktionalität
Mittels der Caching-Funktion der Service Worker stehen einmal abgerufene Inhalte auch offline zur Verfügung. Auch dieses Feature erinnert an native Apps, die keine Internetverbindung voraussetzen. Gerade für Webmaster mit Nutzern, die nur eine schlechte Internetverbindung haben, ist dies ein elementarer Aspekt. Progressive Web Apps verfolgen konsequent einen Offline First Ansatz.

Keine Installation
PWAs müssen nicht auf dem Smartphone oder Tabletcomputer installiert werden. Dies hat enorme Vorteile, da viele Smartphone Nutzer schnell an die Grenzen des Speicherplatzes stoßen. Zudem ist die mentale Hürde eine App zu installieren viel höher, als nur eine Webseite aufzurufen und einen Homescreen Icon hinzuzufügen. Beitreiber einer PWA benötigen also weniger Überzeugungskraft als mit einer App, gewinnen aber eine ähnlich hohe Conversion Rate und Kundenbindung. Da Progressive Web Apps nicht installiert werden müssen, sind die Betreiber auch unabhängig von App Stores, die Anteile für die Vermarktung nehmen würden.

Unterstützung

Ein vollständiger Support von Progressive Web Apps ist derzeit noch nicht gegeben. Dies liegt daran, dass die Service Worker noch nicht von allen Browsern unterstützt werden. Chrome und Firefox sind bereits voll kompatibel, von Safari, Opera und Edge gibt es erste positive Signale. Aktuell (Juni 2016) muss aber gesagt werden, dass die Offline Funktionalität auf iOS nicht funktioniert, da Safari Service Worker nicht unterstützt. Da PWAs aber auf Progressive Enhancement setzen, können Nutzer Progressive Web Apps dennoch vollumfänglich nutzen, nur müssen sie zwingend eine bestehende Internetverbindung haben.

Beispiele

Die ersten erfolgreichen Progressive Web Apps sind von der Washington Post, FlipKart, Booking.com und AirBerlin. FlipKart wird häufig von und anderen Big Playern als Vorzeigebeispiel verwendet, da der indische Online Shop eine Steigerung der Conversion Rate von 70 % und eine dreifache Verweildauer auf den Seiten erzielen konnte. Die Zahl bezieht sich auf die Nutzer, die die Ad-To-HomeScreen Funktion genutzt haben.

Quelle: Wikipedia (https://de.wikipedia.org/wiki/Progressive_Web_App)

Archive

error: Content is protected !!