Progressive Web App

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
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, welche zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren.[1] 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 den Offline-Funktionalitäten. Zur Kommunikation zwischen Webclient und Webserver ist das HTTPS-Protokoll vorgeschrieben.

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.[2] 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 den 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 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 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 umgesetzt.

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 das Caching für die Offline-Verwendbarkeit zur Verfügung.[3] 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, so dass diese nicht mehr selbst entwickelt werden müssen.

Charakteristik[Bearbeiten | Quelltext bearbeiten]

Zusätzlich zu ihren Eigenschaften als Webseiten stellen Progressive Web Apps viele hilfreiche Sonderfunktionen zur Verfügung, die zuvor 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 wenn eine App zu installieren wäre und Speicherplatz beanspruchen würde. Die Kundenbindung dagegen ist ä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 Merkmal 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 werden also auf dem Smartphone oder Tabletcomputer nicht „installiert“. Dies hat erhebliche Vorteile, da viele Nutzer bei ihren Smartphones 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 klassischen 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 und deren Gebühren.

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.[4] Auf iOS war die Offline-Funktionalität nicht verfügbar, bis im Februar 2018 in der Beta-Version von iOS 11.3 Service Worker und das Web App Manifest in Safari 11.1 implementiert wurden.[5]

Da PWAs auf Progressive Enhancement setzen, können sie auch in Browsern verwendet werden, die die Service-Worker-Technologie nicht unterstützen; nur ist dann eine Internetverbindung nötig.

Beispiele[Bearbeiten | Quelltext bearbeiten]

Die ersten erfolgreichen Progressive Web Apps sind von der Washington Post[6], Flipkart[7], Booking.com[8] und Air Berlin[9]. 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.[10] Die Zahl bezieht sich auf die Nutzer, die die Add-To-Homescreen-Funktion genutzt haben. Bereits vorhandene Progressive Web Apps können sich auf dem Online Verzeichnis pwa.bar angesehen werden, unter anderem Twitter und Trivago.[11]

Weblinks[Bearbeiten | Quelltext bearbeiten]

Einzelnachweise[Bearbeiten | Quelltext bearbeiten]

  1. Christian Liebel: Progressive Web Apps, Teil 1: Das Web wird nativ(er). Abgerufen am 30. Oktober 2017.
  2. Mobile Internetnutzer - Anteil in Deutschland 2014 | Statistik. In: Statista. Abgerufen am 23. Juni 2016.
  3. Introduction to Service Worker: How to use Service Worker - HTML5 Rocks. Abgerufen am 23. Juni 2016.
  4. Is ServiceWorker ready? In: jakearchibald.github.io. Abgerufen am 24. Juni 2016.
  5. Christian Liebel: iOS 11.3: Willkommen, Progressive Web Apps! Abgerufen am 15. Februar 2018 (deutsch).
  6. The Washington Post introduces new Progressive Web App experience (washingtonpost.com vom 19. Mai 2016, abgerufen am 25. Juni 2016)
  7. Progressive Web App: A New Way to Experience Mobile (tech-blog.flipkart.net vom 9. November 2015, abgerufen am 25. Juni 2016)
  8. Progressive Web Apps with Service Workers (booking.com vom 21. April 2016, abgerufen am 25. Juni 2016)
  9. Air Berlin entwickelt „Progressive Web App“ (airberlin.com vom 20. Mai 2016, abgerufen am 20. April 2017)
  10. https://developers.google.com/web/progressive-web-apps/
  11. pwa.bar: Das Online Verzeichnis von Progressive Web Apps. Abgerufen am 7. Mai 2018.