Progressive Web Apps: So machst Du die eigene Webseite fast zu einer nativen App

Was sind Progressive Web Apps?

Progressive Web Apps (PWAs) sind ein Mittelweg zwischen nativen Apps und mobilen Websites. Sie sind vergleichsweise günstig zu entwickeln, da sie auf plattformübergreifen Web-Standards basieren, und so Kosten sparen für die Entwicklung und Unterhaltung von jeweils eigenständigen Native Apps für iOS und Android.

Was machen Progressive Web Apps?

PWAs sind im Kern normale Websites, denen mindestens drei weitere Standards hinzugefügt werden:

• Der HTTPS-Standard: Die Verbindung mit dem Internet muss immer über eine sichere HTTPS-Verbindung erfolgen
• Web App Manifest: Das Web-App-Manifest liefert grundlegende Infos über eine Web App wie beispielsweise der Name der Website, dessen Autor, das Icon sowie eine Kurzbeschreibung. Ein Web-App-Manifest kannst du dir auf der Seite von Bruce Lawson generieren lassen.
• Service Worker: in jeder PWA steckt ein Service Worker, das Daten auf dem Gerät abspeichert, wie beispielsweise Artikel, die man schon gelesen hat. So kann man eine App-ähnliche Basis-Funktionalität abbilden, auch wenn das Gerät gar nicht mit dem Internet verbunden ist.

Darüber hinaus können noch folgende typische Funktionen hinzugefügt werden:

• Push-Benachrichtigungen: Um Benachrichtigungen zu erhalten muss die App nicht geöffnet sein
• Offline-Unterstützung (via oben genannter Service Worker): bestimmte Funktionen der PWA können auch ohne Internetverbindung genutzt werden
• sofortiges Laden durch Skeleton Screens: Skeleton Screens, also Skelett-Bildschirme, sollen für den Eindruck schneller Ladezeit sorgen. Sie funktionieren so, dass zunächst beim Start der App schnellstmöglich das Skelett, das Grundgerüst der Seite angezeigt wird. Erst nach und nach füllt sich das Gerüst mit Inhalt.
• ein App-ähnliches Verknüpfungssymbol das auf dem Home-Screen hinzugefügt werden kann
• Videotelefonie und Chats
• Share API: Inhalte können via Twitter, Whatsapp & co. über die Share API geteilt werden
• Bluetooth API: sie erlaubt eine Reihe von Anwendungen für Geräte wie eine Apple Watch und IOT-Geräte, welche über Bluetooth mit dem Handy verbunden sind: Anwendungsbeispiele sind Batteriestatus auslesen, Notifications senden („der Zug verspätet sich um 20 Minuten“), und mehr.
• Zuguterletzt kann die PWA auch in eine Native App umgewandelt werden, wie dieser Artikel (auf Englisch) aufzeigt.

Nachteile

Kein Fisch ohne Haken: Nicht alle Funktionen einer nativen App kann man in einer progressiven Web App abbilden. Das sind unter anderem:

• das Auslesen der SMS (bspw. für einen via SMS zugesendeten Pin-Code) und der Anruferliste
• die Benutzung von Bluetooth und GPS im Hintergrund, also während die PWA gerade nicht aktiv benutzt wird. Beide Punkte sollten jedoch regelmäßig kein Totschlagargument für den Einsatz von PWAs darstellen.

Wissenswert: Der Terminus „Progressive Web App“ wurde von Frances Berriman und Alex Russel im Jahr 2015 geprägt. Alex hat zuletzt auch Kritik an Apple geübt, dass sie die Verbreitung von PWAs im App Store erschweren. Diese Kritik ist im Grunde nicht neu, und dennoch haben PWAs auch für iOS-Nutzer einen deutlichen Mehrwert, wie Jason Grigsby schon 2016 aufgezeigte.

PWAs sind also Webseiten, die wie bisher auch in HTML/CSS und JavaScript aufgesetzt sind, und keine nativen Apps, die man im App Store oder bei Google Play runterlädt. Jedoch kann man sie auch in Native Apps umwandeln. Wie responsive Webseiten stellen Progressive Web Apps alle Inhalte perfekt auf das jeweilige Endgerät abgestimmt dar.

Einen Vorteil gegenüber responsiven Seiten bieten PWAs vor allem dadurch, dass sie für den Endkunden einfacher und flüssiger zu handhaben sind. Ein großer Unterschied zu herkömmlichen Apps stellt bei progressiven Web Apps die Tatsache dar, dass man sie nicht auf dem Endgerät direkt installieren muss. Somit führen sie – aus Nutzersicht – per se keine lästigen oder spionageartigen Hintergrundaktivitäten auf Smartphones, Tablets oder auch Laptops aus.

Dennoch kann man über PWAs zum Beispiel das Icon eines Online-Shops auf dem Desktop anlegen, man kann den Nutzern darüber praktische und informative Push-Nachrichten senden sowie, falls gewünscht, diverse Offline-Funktionen anbieten.

Immer mehr Funktionen, die bislang nativen Apps vorbehalten waren, lassen sich mittlerweile auch per JavaScript abbilden, so dass sich Webapps und native Apps immer mehr annähern. Sogenannte Progressive Web Apps (PWA) stehen klassischen Apps fast in nichts mehr nach.

HTML5 und CSS3 waren nur der Anfang

Mit HTML5 hat die Auszeichnungssprache fürs Web einen Quantensprung hingelegt. Neben einer besseren Semantik war vor allem die Unterstützung des mobilen Internets ein Ziel von HTML5.

So wurden spezielle Eingabetypen für Formulare eingeführt, welche bei Smartphones und Tablets passende Tastaturen einblenden – zum Beispiel für E-Mail-Adressen und numerische Eingaben.

Und die Animationsmöglichkeiten von CSS3 machen es möglich, ressourcensparend Bewegung in eine Website zu bringen, ohne auf JavaScript setzen zu müssen.

Immer mehr JavaScript-APIs für Unterstützung mobiler Geräte
Neben Usability und Gestaltung sind es vor allem aber die vielen mobilen Features, die eine App erst interessant machen. Hier wurden in den letzten Jahren zahlreiche JavaScript-APIs eingeführt, die speziell für Mobilgeräte gedacht sind.

Dazu gehört die Geolocation-API, die Zugriff auf die Standortinformationen eines Gerätes hat, sowie die Device-Orientation-API, mit der du auf die Geräteorientierung zugreifst.

Derzeit noch in der Entwicklung sind APIs, die Audio- und Video-Streaming sowie -Capturing möglich machen. Die Vibration- und Battery-Status-API sorgen sogar dafür, Vibrationsalarme einrichten und den aktuellen Akkustand abfragen zu können.

Wer sich einmal den aktuellen Stand der diversen JavaScript-APIs anschaut, wird feststellen, dass eine Vielzahl der APIs speziell für mobile Endgeräte gedacht ist.

Benachrichtigungen und Hintergrunddienste einrichten

Mit der Notification-API ist es bereits länger möglich, Benachrichtigungen zu erstellen. Hierfür ist es allerdings immer nötig, dass die Website, über welche die Benachrichtigung kommt, im Browser geöffnet ist.

Mit der neuen Push-API und der Service-Worker-API ist es nicht mehr notwendig, dass die entsprechende Website geöffnet ist. Über die Service-Worker-API wird im Browser ein JavaScript registriert, welches unabhängig von einer Website ausgeführt wird. Das Ganze ist vergleichbar mit Hintergrunddiensten nativer Mobilapps.

navigator.serviceWorker.register(”/app.js”)

Das Beispiel registriert die Datei „app.js“ als Service-Worker. Diese Datei mit dem darin enthaltenen Script wird unabhängig von der Website ausgeführt. Dies geschieht über einen Dienst der Browsers, der immer im Hintergrund läuft. Über diese Datei lassen sich beispielsweise Push-Benachrichtigungen einrichten und ausführen.

self.addEventListener("push", function(e) {    const optionen = {    body: "Text",    icon: "/icon.png",    badge: "/badge.png"  };  event.waitUntil(self.registration.showNotification("Titel", optionen));});

Eine einfache Implementierung der Push-API ist mit der Bibliothek Push.js möglich. Hier sind auch Fallback-Lösungen für ältere Browser vorhanden, sodass du sorglos deine Benachrichtigungen einstellen kannst.

Mit den Service-Workern lädst du zudem alle benötigten Dateien für die Offline-Nutzung herunter. je nach Nutzung der App ist diese im Idealfall dann auch ohne Internetverbindung nutzbar.

Web-App-Manifest: Vollbildmodus und Icon auf Startbildschirm

Über das Web-App-Manifest sorgst du letzten Endes dafür, dass das Look-and-Feel deiner Webapp sich nicht mehr von nativen Apps unterscheidet.

Dabei handelt es sich um eine JSON-Datei, die im HTML-Dokument eingebunden wird.

Über die Datei wird dann unter anderem festgelegt, wie die Webapp auf dem Startbildschirm dargestellt werden soll. So werden ein Name, ein Kurzname sowie die Icons in verschiedenen Größen definiert.

 "short_name": "Meine App",  "name": "Meine ganz großartige App",  "icons": [    {      "src": "icon.png",      "type": "image/png",      "sizes": "48x48"    } ],  "start_url": "app.html" }

Über „start_url“ ist es zudem möglich, eine abweichende Start-URL anzugeben, die immer dann geladen wird, wenn du die Webapp über die Startseite aufrufst.

Mit der Eigenschaft “display” ist es zudem möglich, die Webapp ganz ohne Browserlemente wie Adresszeile wiederzugeben.

"display": "standalone";

Auch eine Hintergrundfarbe kannst du mit „background_color“ angeben. Und wer will, kann die Ausgabe der App an eine bestimmte Geräteorientierung binden. Per „orientation“ sind die Werte „landscape“ und „portrait“ möglich.

Hast du sowohl einen Service-Worker eingerichtet als auch ein Web-App-Manifest hinterlegt, blendet der mobile Chrome beim Laden der Seite einen Badge am unteren Seitenrand an, über den du die Webapp auf dem Startbildschirm platzieren kannst.

Der Badge wird jedoch erst eingeblendet, wenn du eine Website mindestens zweimal an zwei verschiedenen Tagen innerhalb von zwei Wochen besucht hast.

Spätestens jetzt ist deine Webapp nicht mehr von anderen nativen Apps zu unterscheiden. Denn beim Aufruf über den Startbildschirm sieht man der Webapp nicht mehr an, dass sie in einem Browser geladen wurde. Außerdem sind viele Features wie Benachrichtigungen und andere Gerätefunktionen möglich.

Eine weitere Voraussetzung muss jedoch noch erfüllt sein: Deine Webapp muss über HTTPS laufen, was mittlerweile aber ohnehin für viele JavaScript-APIs gilt.

Lighthouse-Erweiterung für Chrome

Mit der Erweiterung Lighthouse stellt dir Chrome ein Tool zur Verfügung, welches dir bei der Entwicklung von Progressive Web Apps hilft.

So prüfst du damit zum Beispiel, ob deine Webapp alle Kriterien erfüllt, um zum Startbildschirm hinzugefügt zu werden.

Progressive Web Apps im E-Commerce mit Magento

Dass Internetseiten auf allen gängigen Endgeräten in allen erdenklichen Größen für den User am besten und ansprechendsten aussehen, dafür sorgt „Responsive Webdesign.“ Mit Verbesserungen und einer erhöhte Nutzerfreundlichkeit steigen nun die die progressiven Web Apps in den Ring.

Magento, führender Anbieter von Online-Shop-Systemen, zählt zu den stärksten Befürwortern dieser neuen Technologie. Daher lohnt es sich, bei den PWAs einmal genauer hinzusehen um herauszufinden, welche Veränderungen auf den Online-Handel durch die PWAs zukommen.

Welche Vorteile bieten PWAs für den Online-Handel?

Ein großer Vorteil von PWAs gegenüber herkömmlichen Apps besteht darin, dass es sich dabei trotz der App-artigen Benutzeroberfläche um eine Website handelt, die im Gegensatz zu Apps ganz normal von Suchmaschinen erfasst und gerankt wird. Müssen Apps in der Regel also nicht suchmaschinenoptimiert sein, kann man mit PWAs diesen Vorteil für sich und speziell für den eigenen Online-Shop in Anspruch nehmen.

Progressive Web Apps haben in Zeiten, in denen die mobile Nutzung des Internets der stationären Zuhause-Nutzung den Rang abgelaufen hat, den großen Vorteil, schnell zu laden und somit auch bei partiell schwacher Netzabdeckung mehr als zufriedenstellend zu arbeiten. Diese Eigenschaft, die sogar Funklöcher ausgleichen kann, ist für Online-Shops und auch für Magento deswegen so interessant, da sie für Google zu einem wichtigen Element im Ranking wird.

Progressive Web Apps im Magento-Shopsystem

Der Release von Magento 2.3 enthält das sogenannte „Magento PWA Studio.“ Dieses entstand in enger Kooperation zwischen dem Suchmaschinengiganten Google und Magento, dem Betreiber des global weitverbreitetsten E-Commerce-Shop-Systems. Damit haben Magento Partner und deren Kunden nun die Möglichkeit, eigene PWAs zu entwickeln.

Magentos Senior Director „Strategy and Digital Experience“, Peter Sheldon, meinte in einem Statement, dass die Zukunft deswegen auch auf den Schultern der PWAs läge, weil aktuell zwar über mobile Endgeräte bei vielen Shops rund die Hälfte des Traffics entstünden, aber lediglich ein Drittel der Umsätze. Durch die für den Endverbraucher bessere Bedienbarkeit durch PWAs könne sich letzteres in naher Zukunft steigern lassen.

Vorteile für Magento-Anwender durch PWA

Bislang sind meist „nur“ die Global Player im Bereich E-Commerce auf eigene progressive Web Apps umgestiegen. Das Einsickern dieser kundenfreundlichen Technologie auch in KMUs wird sich aber in den kommenden zwei bis drei Jahren vollziehen. Der Grund – PWAs liefern großen wie kleinen Shops ein Maximum an Leistung speziell für mobile Endgeräte.

Progressive Web Apps: 15 wirklich gelungene Beispiele

About You

About You ist ein Fashion-Startup der Otto Group mit über 600 Mitarbeitern und monatlich 15 Millionen Besuchern. Die PWA von About You wird wie eine native App im Vollbild-Modus ausgeführt und nutzt die Möglichkeiten von Push Notifications aus, indem man bspw. über Sonderangebote oder die neue Winter-Kollektion informiert wird.

About You konnte durch den Einsatz der PWA folgende Verbesserungen erzielen (Link zur Quelle):

• Conversion Rate: +3 %
• Ladezeit: -7 %
• Bounce Rate: -6 %

BMW

Eines der Hauptziele der Umwandlung von BMW.com in eine progressive Web App war es, die schnellste mobile Website der Branche zu erstellen — und diese Bemühungen waren von Erfolg gekrönt (Link zur Quelle):

• Die neue mobile Website lädt dreimal so schnell wie vorher,
• Die CTR (Click-Through-Rate) ist von 8 Prozent auf 30 Prozent gestiegen, d.h. 30% der Website-Besucher von BMW.com klicken sich bis auf die Verkaufsseiten durch,
• Dank einer zusätzlichen Einbindung von Google AMP verzeichnet die Website zudem 27 Prozent mehr mobile Nutzer und einen Gesamtanstieg der Besucherzahlen um 49 Prozent.

Continental

Das digitale Continental Magazin ist seit 2016 der Nachfolger eines ehemals in Druckform erscheinenden Kundenmagazins. Die Umsetzung als PWA führte hier ebenso zu einer deutlichen Beschleunigung der Ladezeiten:

• Die PWA lädt viermal schneller als auf der vorherigen mobilen Website
• Push-Benachrichtigungen spielen eine wichtige Rolle um die Besucher über Neuigkeiten zu informieren.
• Ebenso lässt sie sich die Web App offline verwenden, d.h. eine Auswahl an Artikeln wird im Hintergrund geladen und kann dann auch ohne Internetverbindung gelesen werden (Link zur Quelle):

Financial Times

Die Financial Times hat bereits ab 2011 nach und nach auf den Einsatz von nativen Apps verzichtet, und sich stattdessen auf den Einsatz von PWAs konzentriert, ein damals schwieriges und risikoreiches Unterfangen, welches immer wieder von Rückschlägen gezeichnet war, etwa weil die ersten Web-Applikationen für iOS noch mit PhoneGap gebaut wurden, und der heutige Service-Worker-Standard schlichtweg noch nicht existierte.

Die Progressive Web App von Financial Times ermöglicht ein schnelleres Laden von Artikeln, da diese zunächst geladen und lokal gespeichert werden – und somit auch im Offline Modus gelesen werden können.

George at Asda

Mit einem sehr hohen Anteil an mobilen Besuchern hat sich die britische Bekleidungs-Marke  „George at Asda“ entschieden, einen PWA-basierten Shop online zu bringen. Nach dem Launch desselben konnten sie einen 31 %-igen Anstieg der mobile Conversions sowie 15% mehr Seitenaufrufe je Besuch verzeichnen. Auch die Verweildauer in der PWA erhöhte sich um ganze 28 %, da die Betreiber auch eine Add to Homescreen Funktion eingeführt haben (Link zur Quelle).

Google Maps Go

Bis dato mir unbekannt war, dass auch Google Maps mit einer eigenen progressiven Web App aufwartet (Link). Die Version ist vor allem für Handys mit einer geringen Leistungskapazität ausgelegt.

Instagram Lite

Instagram Lite ist nicht nur eine Progressive Web App, sie widerlegt auch die immer noch weit verbreitete Annahme, dass PWAs nicht auch bei Google Play erhältlich sein könnten.

Instagram Lite wendet sich vornehmlich an User in der Dritten Welt, welche regelmäßig mit einer langsamen und instabilen Internetverbindung hadern müssen. Die Instagram Lite PWA ist nur ca. ein halbes Megabyte (MB) schwer und ist somit ca. 50 mal so leicht wie die native App mitsamt Chat-Funktion und Video-Edits. Mit Instagram Lite können auch Fotos hochgeladen und nach ihnen gesucht werden. Somit kann die PWA die Kernfunktionen des Dienstes auch sehr wohl in der Lite-Version abbilden.

Meine-Kartenmanufaktur.de

Meine-Kartenmanufaktur.de ist ein äußerst erfolgreicher Online-Shop der Digital Print Group aus Nürnberg, welcher auf den Druck individueller Karten spezialisiert ist. Er ist ein schönes Beispiel dafür, dass auch WordPress-Seiten zu einer progressiven Web-App umgewandelt werden können: Der Shop läuft auf WordPress und WooCommerce und hat das Enfold Theme installiert. Mittels des PWA-Plugins für WordPress wird die Seite zu einer Progressive Web App, und ist somit auch offline nutzbar.

Netmoms.de

Netmoms.de ist ein Portal des Burda-Verlags mit über 12 Millionen Seitenaufrufen im Monat. Die PWA von Netmoms bietet schnelle Ladezeiten und personalisierte Push-Nachrichten für eingeloggte User. Auch kann man sich nach Zugriff auf den eigenen Standort potentielle neue Freundinnen in der näheren Umgebung anzeigen lassen.

Nikkei

Mit mehr als 450 Millionen Seitenaufrufen pro Monat ist Nikkei das in Japan führende Portal für Wirtschafts- und Finanznachrichten. In 2017 hat das Verlagshaus eine PWA veröffentlicht, welche beeindruckende Leistungszuwächse erzielt hat, unter anderem hat sich die Ladezeit der Seite um 14 Sekunden verbessert, und durch welche sich wiederum deutliche Erfolge hinsichtlich der Zugriffszahlen und der Conversion-Rate erzielen ließen (Quelle).

• Der mobile Traffic hat sich mehr als verdoppelt
• Es konnten 58% mehr Abonnements im Vergleich zur mobilen Vorgängerseite erzielt werden
• Es gibt 49% mehr aktive Nutzer pro Tag
• Die Anzahl der Seitenaufrufe pro Sitzung hat sich mehr als verdoppelt

Tinder

Tinder wurde erstmals auf dem Chrome Dev Summit in 2017 vorgestellt. Die PWA bildet nahezu alle Funktionen der nativen App ab. So kann beispielsweise durch Freigabe des Standortes Nutzer in der Umgebung angezeigt werden, und wie in der nativen App kann man durch das Streichen nach links und nach rechts potentielle Liebschaften ab- oder auswählen (Link zur Studie).

Tourismus NRW E.V.

Die PWA des Tourismusverbands NRW führt Besucher als digitaler Guide zu relevanten Orten der Popmusik. Durch die neuen Funktionalitäten können User durch Freigabe ihres Standortes durch verschiedene Städte navigiert werden und erhalten in kurzer Entfernung zu verschiedenen Spots weiterführende Inhalte in multimedialer Form (Link zur Website).

Twitter

Twitter Lite ist die Browser-basierte Version der nativen Twitter-App. Die PWA wurde 2017 an den Start gebracht, und hat bemerkenswerte Resultate erzielt, und das bei nahezu identischem Funktionsumfang (Quelle):

• Einen 65%-igen Zuwachs an Seitenaufrufen je Sitzung
• Einen 75%-igen Zuwachs an Tweets
• Eine Reduzierung der Absprungrate um 20%
• Eine Reduzierung der Ladezeit um 30% im Vergleich zur Vorgängerversion der mobilen Website
• 10 Millionen Push-Notifications werden jeden Tag über Twitter Lite versendet
• Die PWA wiegt nur 1/40 der nativen App

Uber

Uber hat 2017 eine PWA auf den Markt gebracht, die sich vorrangig an Nutzer mit begrenzter Datenbandbreite richtet. Die Kernanwendung ist gerade einmal 50 kb groß und benötigt weniger als 3 Sekunden, um in 2G Netzwerken geladen zu werden. (Quelle)

Bei so vielen Smartphones brauchst du doch unbedingt eine App. So denken nicht wenige Unbedarfte, im Designerjargon auch als Kunden bekannt. Aber sogar Fachleute empfehlen bisweilen, bei Redesigns direkt auf native Apps zu setzen, anstatt auf eine Website. Warum das falsch ist, erklärt dieser Artikel.

Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich um das Jahr, in dem sich Progressive Web Apps aller Prognose nach endgültig durchsetzen dürften. Wenn du dich mit dem Thema bisher nicht beschäftigt hast, dann wird es jetzt höchste Zeit.

Menschen verbringen immer mehr Zeit mit ihren mobilen Geräten

Zum Thema der Nutzung nativer Apps gibt es einen ganzen Reigen verschiedener Studien, die mal die eine, mal die andere Sichtweise unterstützen. Häufig kommt es allerdings allein darauf an, wie wir die Studienergebnis