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 Studienergebnisse lesen. Schauen wir uns einmal die schlagkräftigsten Beispiele an.

Im US Mobile App Report veröffentlicht das Statistikunternehmen Comscore Zahlen zur Verweildauer von Nutzern mobiler Geräte. Dabei stellt sich heraus, dass mobile Nutzer 87 Prozent ihrer Zeit in Apps verbringen und nur 13 Prozent mittels mobiler Browser im offenen Web. Diese Zahl ist ebenfalls seit Jahren weitgehend stabil, obschon in den letzten Jahren rückläufig zu Gunsten der Mobilbrowser.

Na, das ist doch mal eine ganz klare Aussage, mag dein Kunde jetzt denken. Ich brauche eine App für mein Unternehmen. Immerhin habe ich damit eine Chance von 87:13, dass ich mobil wahrgenommen wäre. Allein, die Annahme ist falsch.

Denn schauen wir uns die Top 10 der Apps an, wird schnell klar, dass es sich hier gar nicht um eine Konkurrenzsituation zwischen dem offenen Web und dem App-Kosmos handelt. Die Nutzer verwenden ihre Geräte schlicht ganz anders.

Dabei ist es gerechtfertigt, die Facebook-App aus der Betrachtung heraus zu nehmen, denn hier handelt es sich lediglich um eine appifizierte Form der Webnutzung. Facebook ist nun mal die mit Abstand größte digitale Präsenz des Planeten. Das können wir nicht als Referenz sehen. Gleiches gilt für YouTube. Hier bietet die Verwendung der mobilen Site keine Vorteile. Die App greift auf die gleichen Inhalte zu.

Auffällig: Acht der zehn meistgenutzten Apps gehören entweder Facebook oder Google. Hat dein Kunde da eine Chance, zu konkurrieren? Die Statistik liest du übrigens so: 81 Prozent der Smartphone-Nutzer verwenden die Facebook-App usw.

Schauen wir mal mit eMarketer auf die Nutzungsfelder mobiler App-User. Das sind zumeist solche, die auf dem stationären Computer so gut wie keine Rolle (mehr) spielen. Das liegt vornehmlich an der sehr gezielten Ausrichtung mobiler Apps auf mobile Geräte. Natürlich werde ich ein kleines Spiel lieber auf meinem Smartphone spielen. Immerhin hat es Sensoren, die das Spielen interessanter machen und ich habe es immer dabei. Auch Produktivitäts-Apps, wie Aufgabenplaner, Kalender und so weiter, nutze ich selbstverständlich gerne auf dem Smartphone, denn da habe ich sie stets verfügbar. Kleine Utilities haben sich ihren Marktanteil erst über die Verfügbarkeit von Smartphones selbst geschaffen.

Der Bereich Gaming ist mit 14,3 Prozent stabil vertreten. Gegen die sozialen Netzwerke mit ihrem Anteil von 23,9 Prozent kommen die Gamer jedoch nicht an. 18,7 Prozent Anteil können die mobilen Video-Apps für sich verbuchen. Die Zahl wurde in früheren Jahren gar nicht bestimmt. Musically und Co haben da einen regelrechten Boom erzeugt. Allen dieser Anwendungsfälle gemeinsam ist, dass es sich um für mobile Geräte prädestinierte Nutzungen handelt.

Abschließend schauen wir noch auf einen Screenshot der Top-Apps im Google Play Store vom heutigen Tage:

Was fällt dir sowohl bei den obigen Studien, wie auch bei dem eben gezeigten Screenshot auf? Richtig, es ist keine große Marke mit einer App vertreten, die die klassischen Aufgaben der bisherigen Website wahrnehmen würde.

Learning #01:

Apps werden sehr selektiv genutzt und müssen sich hinsichtlich ihres Anwendungszwecks optimal für die mobile Nutzung eignen. Reine Informationsbeschaffung findet auf mobilen Geräten nur in Höhe der bereits genannten dreizehn Prozent mobiler Browsernutzung statt.

Deshalb lohnt es sich auch nicht, eine App zu erstellen, die der reinen Informationsbeschaffung dienen würde. Das verstehst du sofort, wenn du mal überlegst, ob du schon mal im App-Store nach einem Restaurant, Friseur oder IT-Dienstleister gesucht hast. Nee, hast du nicht.

Die normale Durchschnitts-App existiert nicht mehr

In 2014 galt, dass der durchschnittliche Smartphone-Nutzer 8,8 Apps pro Monat installiert. Diese Zahl hatte sich zu dem Zeitpunkt seit drei Jahren kaum verändert. Aktuellere Zahlen aus 2017 zeigen, dass sich der Wert inzwischen deutlich nach unten korrigiert hat. Nur 49 Prozent der untersuchten Nutzer installieren überhaupt noch Apps; 32 Prozent zwischen einer und drei Apps im Monat.

Noch schlimmer wird der Ausblick, wenn wir jetzt Localystics zu Wort kommen lassen, die herausfanden, dass die durchschnittliche Android-App innerhalb von 90 Tagen nach der ersten Verwendung über 71 Prozent ihrer aktiven Nutzer wieder verliert. Schon nach dreißig Tagen liegt der Wert bei 57 Prozent. Dabei musst du noch berücksichtigen, dass die Quote über alle Apps gemittelt ist. Hier heben Games den Schnitt an. Würden wir Games rausrechnen, lägen wir eher bei um die 90 Prozent Verlustrate.

Im ersten Quartal 2018 betrug die verfügbare Anzahl an Apps, allein für iOS, runde zwei Millionen. Die Zahl blieb seit 2016 relativ stabil. Im Google Play Store finden wir sogar 3,8 Millionen Apps zum gleichen Zeitpunkt. Damit hat sich deren Zahl seit 2016 nahezu verdoppelt.

Aus diesen Zahlen lässt sich schlussendlich nur eine logische Schlussfolgerung ziehen. Biete deinen Kunden auf keinen Fall eine App an, es sei denn, sie gehören zu den wenigen, die in das oben genannte Profil fallen.

Nehmen wir als Beispiel Snapchat. Hier ist die App das Produkt. Die Website weist lediglich auf den Download der App hin. Dieses Unternehmen benötigt selbstverständlich eine App, es ist quasi die App. Aber der normale Durchschnittskunde fällt damit nur auf die Nase.

Learning #02

Die mobile Internetnutzung steigt weiterhin an, wenn auch nicht mehr so rasant, wie in den ersten zehn Smartphone-Jahren. Die Nutzung von Apps hingegen, ist eher rückläufig. Es empfiehlt sich daher nicht, Kunden eine App vorzuschlagen. In nahezu jedem Falle wird eine responsive Website als progressive Web-App eher das Mittel der Wahl sein. 

Vorteile responsiver Websites im Vergleich zu nativen Apps

Es mag trivial erscheinen, aber es gibt natürlich ein paar handfeste Vorteile , die responsive Websites von nativen Apps abgrenzen. Dabei handelt es sich nur dann um tatsächliche Vorteile, wenn man zuvor, anhand des bisher Gesagten, schon zu dem Ergebnis gekommen ist, dass eine native App wohl nicht das richtige für den Kunden Kasulke & Co. ist.

Bevor wir zu den Vorteilen kommen, wollen wir noch kurz festhalten, dass die Standardisierung der Webtechnologien dazu geführt hat, dass frühere Nachteile von Web-Apps gegenüber nativen Apps, allen voran der Zugriff auf Gerätefunktionen, kaum noch eine Rolle spielen. Lies unsere Artikel zu PWA hier und hier und überzeug dich selbst.

Nun aber zu den Vorteilen einer Web-App gegenüber der nativen Mobil-App:

Die Kosten sind weit geringer

Die Kosten einer responsiven Website sind um einiges geringer als die Kosten einer App. Das gilt zumindest dann, wenn man an die App gewisse ästhetische Anforderungen stellt und nicht mit dem erstbesten Baukastensystem zufrieden ist.

Ich habe eben eine vorhandene Website hinsichtlich ihrer sinnvollen Funktionen als App umgesetzt und für deutlich weniger Funktionalität ungefähr die dreifache Entwicklungszeit gebraucht. Das war dem Kunden schwer zu vermitteln.

Du brauchst keine App-Store-Regularien einzuhalten

Native Apps müssen zur Überprüfung eingereicht werden und kommen manchmal erst nach Tagen im App-Store an, von wo aus sie den Weg auf das Endgerät finden können. Jedes Update muss erneut durch diesen Prozess. Es ist erforderlich, entsprechende Developer-Accounts bei den Store-Betreiber anzulegen und zu pflegen. Eine responsive Website stellen wir einfach online.

Dadurch ist die Verfügbarkeit höher, quasi sofort

Der letzte Satz sagt es bereits. Responsive Websites stellen wir einfach online und schon sind sie verfügbar. Sie müssen nicht installiert werden. Nichtsdestotrotz ist es möglich, unsere responsive Website quasi installationsfähig zu machen. Der Nutzer legt sich dann ein Icon auf dem Homescreen an, von wo aus er künftig jederzeit die entsprechende Website starten kann. Mit PWA haben wir noch weitergehende Möglichkeiten.

Die Sichtbarkeit im offenen Web ist ebenfalls höher als im App-Store

Eine responsive Website gestalten wir nach allen Regeln der SEO-Kunst und sorgen so dafür, dass sie weit oben in den Suchergebnisseiten landet. Mit einer App können wir das nur mittelbar, indem wir eine Website, die den Download promotet, entsprechend der gleichen Regeln anlegen. Wer wird einen solchen Zwischenschritt für sinnvoll erachten? Zumal sich die Sichtbarkeit nicht auf die Inhalte der App erstrecken würde. Auch in diesem Punkt gewinnt klar die responsive Website.

Die fortschreitende Mobilnutzung des Web bedroht die offenen Standards

Es lässt sich nicht leugnen. Die Nutzung des Web verlagert sich mehr und mehr auf mobile Geräte. Dabei dominieren native Apps, die ihre Inhalte vorwiegend aus dem Web ziehen und innerhalb der App zur Anzeige bringen.

Langfristig entwickelt sich daraus die Gefahr, dass Apps mit entsprechender Reichweite ganz auf das Web als Inhaltsgeber verzichten. Facebook wird hier gern als potenzielles Beispiel genannt. Sollte sich die Nutzung irgendwann so stark in Richtung mobiler Plattformen verändert haben, dass die Unterhaltung eines webbasierten Zugangs unnötig erscheint, könnte Zuckerberg durchaus auf die Idee kommen, nur noch mit Apps und direkten Datenbankverbindungen zu arbeiten. Eine ohnehin schon stark geschlossene Gesellschaft schlösse sich noch mehr und schottete sich vor offenen Standards ab. Das Web, wie wir es kennen, wäre am Ende.

Mit Snapchat gibt es bereits heute eine Anwendung, die ausschließlich als App gedacht ist und keinerlei Schnittstellen nach außen besitzt. Auch Instagram ist über das Web nur rudimentär zu nutzen. Der ganze Spaß steht nur über die App zur Verfügung.

Natürlich ist eine solche Situation aus Sicht der Betreiber nicht nur nicht zu beklagen, sondern im Gegenteil überaus erstrebenswert. Schließlich bleibt so die Verweildauer auf dem eigenen Angebot gleichbleibend hoch. Bouncerates spielen genauso wenig eine Rolle wie Suchmaschinenoptimierung und andere Problemfelder, mit denen sich Betreiber auseinandersetzen müssen, wenn sie im offenen Wettbewerb mit Anbietern stehen, die jeweils nur einen Klick entfernt sind.

Für Designschaffende, Endnutzer und all jene Seitenbetreiber, die nicht die Reichweite von Facebook oder Snapchat haben, ist die Entwicklung hingegen ebenso gefährlich, wie sie es für den anderen Web-Riesen namens Google ist. Das ist gut für uns alle, denn nur mit der aktiven Förderung offener Standards kann Google den Trend stoppen. Ohne den blauen Konkurrenten würde Google wohlmöglich ebenfalls geneigt sein, sich einen komfortablen Garten anzulegen, der mit einer schicken Mauer nach außen abschließt.

Hier sehen wir ein gutes Beispiel dafür, dass Konkurrenz das Geschäft belebt. Facebook braucht kein offenes Netz, da sich das gesamte Leben innerhalb des Dienstes abspielt. Google lebt von seinem Anzeigengeschäft im offenen Netz. Kein anderes Geschäftsfeld bringt dem Konzern Gewinne. Niemals darf Google daher riskieren, dass sich das offene Netz schließt.

Wider die native App: Web-Apps stehen für das offene Web

Auf der untersten Ebene eines möglichen Konsenses dürfen wir als Web alles verstehen, was eine linkbare URL besitzt und über diese aufgerufen werden kann. Mit dem Erstarken der mobilen Plattformen ging der Designtrend hin zu Mobilität in der Gestaltung. Die Besonderheiten eines Smartphones wurden auf unterschiedliche Weise im Prozess berücksichtigt.

Heute gilt das sogenannte responsive Design als der Weg der Wahl. Dieser Ansatz stellt sicher, dass eine Website auf den diversen mobilen Geräten jeweils so präsentiert wird, wie es den Beschränkungen des Gerätes entspricht, ohne dass die Website zu sehr an Funktionalität verliert. Wenn wir ehrlich sind, ist dieser responsive Designansatz in der Mehrzahl der Fälle ein Kompromiss.

Im Vergleich zu nativen Apps konnten mobile Web-Apps lange Zeit funktional nicht mithalten. Zwar ließ sich die Optik einigermaßen gut angepasst auf den mobilen Bildschirm bringen, sobald jedoch Zugriff auf Gerätefeatures, wie die Kamera oder diverse Sensoren, gefragt war, kam unabdingbar die native App ins Spiel.

Natürlich begannen die Probleme nicht erst an diesen Schnittstellen. Schon das Verhalten unter schlechten Internetbedingungen oder gar vollkommenen Funkversagens führte zur Unbedienbarkeit der Web-App.

Progressive Web Apps wollen genau da ansetzen.

Progressive Web Apps sind das Beste beider Welten

Unter dem Eindruck der Erkenntnis, dass auch Google großen Wert auf die Erhaltung des offenen Web legen muss, erscheint es geradezu logisch, dass sich die Kalifornier massiv an der Durchsetzung des Konzeptes der Progressive Web Apps beteiligen. Diese finanzstarke Unterstützung sollten wir begrüßen. Denn so bleiben uns zweifelsfrei bestehende Isolationstendenzen seitens Facebook und Co. voraussichtlich noch auf lange Sicht erspart.

Die Progressive Web App ist ein Konzept, das die Stärken beider Welten, nämlich der der nativen Entwicklung für Mobilgeräte und der der Entwicklung auf der Basis offener Webstandards, verbindet und vereint.

Eine Progressive Web App ist eine aufgebohrte Version bisher schon existierender mobiler Websites. Aufgebohrt in diesem Sinne bedeutet, dass sie über Features und Fähigkeiten verfügt, die man bislang nur aus dem Bereich der nativen Entwicklung kannte. Diese neue Generation von Web-Apps ist also in der Lage, viele der Fähigkeiten heutiger Mobil-Apps zu bieten, so dass derlei native Apps in weiten Teilen unnötig werden.

Na ja, könntest du jetzt einwenden. Wenn die neue Generation von Web-Apps nur die Fähigkeiten bereits existierender nativer Apps zu bieten hat, wieso sollten wir dann darauf setzen? Die Antwort darauf hat mehrere Facetten.

Zum einen wies ich bereits darauf hin, dass es für uns alle negative Folgen haben wird, sollten wir uns vom offenen Web abwenden und uns freiwillig in Walled Gardens einhegen zu lassen. Erinnerst du dich noch an AOL und Compuserve? Da wollen wir doch keinesfalls wieder hin zurück. So betrachtet ist es fast schon eine Frage der Ehre, mindestens aber der Philosophie, die man zu unterstützen bereit ist.

Zum anderen hat eine Web-App natürlich ganz eigene Vorteile. Eine Web-App wird über die Google-Suche gefunden und kann aufgerufen und genutzt werden. Es ist nicht erforderlich, sie in einem der App-Stores zu lokalisieren und von dort zu installieren. Web-Apps müssen nicht für jedes Update erneut durch die Prozesse des App-Stores laufen und dann zumeist umfangreich als Update installiert werden.

Progressive Web Apps vereinen nun die Vorteile nativer Apps hinsichtlich der Schnittstellennutzung, der lokalen Datenhaltung, der Möglichkeit, Benachrichtigungen einzublenden und einige Details mehr, mit der unkomplizierten schnellen Verfügbarkeit webbasierender Angebote und deren unmittelbare Aktualität, die keiner Updateprozesse bedarf.

Der Unterschied zwischen Web-App und Progressive Web App

Eine auf den kleinen Bildschirm eines Mobilgerätes optimierte Web-Ansicht ist die kleinste Version einer Web-App. Im Grunde ist es lediglich eine mobil zu konsumierende Website, die dabei mehr oder weniger nach App aussieht. Die Optik an Apps zu orientieren, ist dabei durchaus ratsam, wenn man sich an den Klassiker „Don’t make me think” von Steve Krug erinnert.

Die Komponenten einer Progressive Web App

Die Progressive Web App geht ein paar Schritte weiter. Sie ist darauf ausgelegt, möglichst viele, wenn nicht alle geräte- und browserspezifischen Features nutzbar zu machen. Dies geschieht progressiv.

Application Shell

Das bedeutet, dass die App im Kern erstmal eine mobile Ansicht einer URL zeigt und dann auf die Fähigkeiten des aufrufenden Gerätes und Browsers reagiert. Auf diese Weise bleibt sichergestellt, dass eine Progressive Web App ganz grundsätzlich auf jedem Gerät und Browser funktioniert, allerdings in unterschiedlichem Umfang, eben progressiv angepasst an die aufrufende Umgebung.

Optisch orientiert sich die Progressive Web App dabei an den Designstandards nativer Apps. Im Idealfall erkennt der Nutzer den Unterschied in der Bedienung nicht. Die sogenannte App Shell, also das Grundgerüst oder der äußere Rahmen für die dynamischen Inhalte, wird dabei so angelegt, dass sie sich nach dem ersten Aufruf in den Gerätecache legt und fortan ohne Verzögerungen von dort aus aufgerufen werden kann.

Service Workers

Das Herzstück einer Progressive Web App sind die Service Workers, die fortgeschrittene Funktionalitäten erst möglich machen. Ein Service Worker ist – verkürzt gesagt – ein JavaScript, das, anders als bislang möglich, im Hintergrund einer Webanwendung arbeiten kann. Das funktioniert sogar dann, wenn die Website gar nicht geöffnet ist.

Einer der offensichtlichsten Anwendungsfälle für einen Service Worker ist das Cachen von Inhalten im Hintergrund. Das kann zum einen den Grund haben, dass stets frische Inhalte ohne Ladepausen verfügbar sein sollen oder den, dass eine Web-App auch dann funktionieren muss, wenn gerade keine Verbindung zum Netz besteht.

Du kannst über einen Service Worker aber, um im Beispiel zu bleiben, nicht nur Inhalte speichern lassen, sondern auch nach Fällen unterscheiden, also schlussendlich programmlogische Abläufe starten, die in unterschiedlichen Abhängigkeiten zu unterschiedlichen Ergebnissen führen. Damit wirst du sehr flexibel in den Reaktionsmöglichkeiten deiner App.

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Script-Schnipseln anzulegen, die diverse Basisfunktionalitäten abdecken. Solche „Rezepte” findest du etwa im Service Worker Cookbook von Mozilla oder in der Awesome List Awesome Service Workers.

Der erste Anwendungsfall, den du ganz sicher abdecken willst, ist die Anzeige eines sinnvollen Angebots bei Nichtbestehen einer Internetverbindung anstelle der generischen „You are offline”-Fehlerseite. Je nach Anwendung ist es sogar möglich, den Nutzer gar nicht auf die fehlende Netzverbindung aufmerksam zu machen, solange sie nicht zwingend zur sinnvollen Verwendung erforderlich ist.

Service Worker setzen HTTPS voraus, was die gesamte Anwendung sicherer macht.

Web App Manifest

Um das Nutzererlebnis noch näher an das einer nativen App anzulehnen, ist es ratsam, deine Progressive Web App zur Installation anzubieten. Dazu hinterlegst du eine JSON-Datei, die als Web App Manifest bezeichnet wird.

Damit erreichst du, dass der Nutzer in die Lage versetzt wird, deine App auf seinem Gerät zu installieren. Tatsächlich wird nicht nur ein Shortcut angelegt, wie man das bislang kannte. Vielmehr führt das Manifest zunächst mal dazu, dass dem Besucher ein Installationsbanner angezeigt wird. Dieses Banner kennst du bereits, bloß eben bisher lediglich versehen mit der Aufforderung, eine native App zu installieren.

Zudem kannst du festlegen, dass die App im Standalone-Modus geöffnet wird, also ohne den ausführenden Browser rund um die App anzuzeigen. Ein Icon weist du ebenfalls einfach zu. Mit entsprechend konfiguriertem Service Worker legst du bei der Gelegenheit gleich mindestens die App Shell auf dem Gerät ab.

Ebenso finden sich die so aufgerufenen Apps in der Übersicht der laufenden Anwendungen des mobilen OS als individuelle Anwendungen, nicht etwa kumuliert in einer Browserinstanz wieder.

Push Notifications

Über die Push-API kannst du den Verwendern deiner App sogar dann Benachrichtigungen aufs Display senden, wenn sie deine App zu diesem Zeitpunkt gar nicht verwenden. So ist es möglich, die Interaktionsrate mit deiner App proaktiv zu steigern. Push Notifications kommen allerdings nur mit Zustimmung der Nutzer aufs Display.

Die erste Progressive Web App mit dem Service Worker Cookbook erstellen

Herzstück jeder PWA sind die Service Workers, die fortgeschrittene Funktionalitäten erst möglich machen. Ein Service Worker ist – verkürzt gesagt – ein JavaScript, das, anders als bislang möglich, im Hintergrund einer Webanwendung arbeiten kann. Das funktioniert sogar dann, wenn die Website gar nicht geöffnet ist.

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Scripten anzulegen, die diverse Basisfunktionalitäten abdecken. Solche Rezepte findest du etwa im Service Worker Cookbook von Mozilla, das inzwischen ein erhebliches Repertoire an Standard-Funktionalitäten abzudecken weiß.

Dazu gehören vor allem Features, über die jede PWA verfügen muss, wie etwa das Cachen von Daten oder Fallback-Techniken bei nicht bestehender Online-Verbindung. Alle Rezepte sind ausführlich dokumentiert. Die Demos sind so angelegt, dass die Firefox Entwicklertools ebenfalls nützliche Informationen preisgeben.

Fazit

Progressive Web Apps sind Websites, die sich progressiv an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen. Progressiv bedeutet dabei, dass die App umso leistungsfähiger wird, je leistungsfähiger das Gerät, respektive der Browser, mit dem sie aufgerufen wird, sind. Zur Erstellung werden ausschließlich offene Webstandards verwendet.