Progressive Web App

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
Dieser Artikel oder Abschnitt bedarf einer Überarbeitung: Definition muss belegt und dabei wahrscheinlich zumindest ein bisschen überarbeitet werden, denn bisher erscheint mir das nicht ganz der Mainstream. Außerdem fehlen auch im Rest des Artikel Belege und / oder eine Zuordnung der Aussagen zu den jeweiligen Verfassern. --h-stt !? 16:50, 2. Aug. 2016 (CEST)
Hilf mit, ihn zu verbessern, und entferne anschließend diese Markierung.

Eine Progressive Web App (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 Apps können wie eine Webseite einfach mit HTML5, CSS3 und JavaScript 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-Protokoll 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.[1] 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 Entwicklung überflüssig, da sie wie eine Webseite mittels URL aufgerufen werden kann und gleichzeitig offline Funktionalitäten bereitstellt.

Funktionsweise[Bearbeiten | Quelltext bearbeiten]

Der Benutzer startet eine Progressive Web App, indem er z. B. in einem Browser 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 Webanwendung fungiert. Dieses generiert oder lädt daraufhin den HTML-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 jedem Nutzer, entsprechend seiner 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[Bearbeiten | Quelltext bearbeiten]

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.[2] Einmal online aufgerufen, können die Inhalte beim nächsten Besuch der 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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

Die Add-To-Homescreen Funktionalität kann mit den meisten Webbrowsern über das Hamburger-Menü-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[Bearbeiten | Quelltext bearbeiten]

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

Offline Funktionalität[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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. Betreiber 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[Bearbeiten | Quelltext bearbeiten]

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.[3] 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 Apple Nutzer Progressive Web Apps dennoch vollumfänglich nutzen, nur müssen sie zwingend eine bestehende Internetverbindung haben.

Beispiele[Bearbeiten | Quelltext bearbeiten]

Die ersten erfolgreichen Progressive Web Apps sind von der Washington Post[4], Flipkart[5], Booking.com[6] und Air Berlin[7]. Flipkart wird häufig als Vorzeigebeispiel verwendet, da der indische Online Shop eine Steigerung der Conversion Rate von 70 % und eine dreifache Verweildauer auf den Seiten erzielen konnte.[1] Die Zahl bezieht sich auf die Nutzer, die die Add-To-Homescreen Funktion genutzt haben.

Weblinks[Bearbeiten | Quelltext bearbeiten]

Einzelnachweise[Bearbeiten | Quelltext bearbeiten]

  1. Mobile Internetnutzer - Anteil in Deutschland 2014 | Statistik. In: Statista. Abgerufen am 23. Juni 2016.
  2. Introduction to Service Worker: How to use Service Worker - HTML5 Rocks. Abgerufen am 23. Juni 2016.
  3. Is ServiceWorker ready? In: jakearchibald.github.io. Abgerufen am 24. Juni 2016.
  4. The Washington Post introduces new Progressive Web App experience (washingtonpost.com vom 19. Mai 2016, abgerufen am 25. Juni 2016)
  5. Progressive Web App: A New Way to Experience Mobile (tech-blog.flipkart.net vom 9. November 2015, abgerufen am 25. Juni 2016)
  6. Progressive Web Apps with Service Workers (booking.com vom 21. April 2016, abgerufen am 25. Juni 2016)
  7. Air Berlin entwickelt „Progressive Web App“ (airberlin.com vom 20. Mai 2016, abgerufen am 20. April 2017)