Teamkollegen bei der Entwicklung von PWAs

Die perfekte User Journey: Sind Progressive Web Apps die Zukunft des Internets?

Progressive Web Apps (kurz: PWAs) werden als die Zukunft des Internets gehandelt – doch was ist wirklich dran an diesem Hype? Wir haben die wichtigsten Daten und Fakten rund um das viel diskutierte Format zusammengefasst und uns mit Jan Heinzle, Senior Web Developer bei der Digitalagentur pixelart, zum Thema PWAs unterhalten.
18
Feb
2020

2020 wird das Jahr der PWAs – das sagten zumindest die IT-Analysten von Gartner Research in ihrer Trend-Prognose von 2017 voraus. Genauer gesagt lautete ihre Vorhersage, dass die Hälfte aller mobilen Apps für Endanwender durch PWAs abgelöst werden. Letztendlich hat sich die Prognose nicht bewahrheitet.

Ein Trend zeichnet sich aber dennoch ab, bestätigt der Experte Jan Heinzle von pixelart: „Vereinfachte User Journeys und das Credo ‚Mobile first‘ verlangen nach simpleren Lösungen, um Kunden reibungslos zur Conversion zu leiten.“ Und genau hier kommen PWAs ins Spiel!

 

Verbesserte User Experience auf mobilen Endgeräten

Während vor einigen Jahren noch vom Desktopcomputer aus im Internet gesurft wurde, ist das Smartphone heutzutage das meistgenutzte Gerät, um Internetservices aufzurufen. „Mobile first“ hat sich mittlerweile als Standard für Onlineprojekte etabliert.

Um die User mobiler Geräte abzuholen, gab es bisher zwei Alternativen: Webseite in responsiver Technik oder die Entwicklung einer nativen App. Oftmals werden diese beiden Möglichkeiten kombiniert, um den Nutzer an verschiedenen Touchpoints abzuholen. Optimal ist diese Lösung nicht. Denn zum einen verursacht sie hohe Kosten in der Konzeption und Erstellung. Zum anderen bedeutet es, dass die User Journey dadurch unterbrochen wird. Ganz anders sieht dies bei Progressive Web Apps aus. Sie verbinden die Vorteile einer Webseite mit jenen einer App und ermöglichen den Usern eine nahtlose Experience.

Progressive Web App: die Lösung aller Probleme?

„Kurz gesagt handelt es sich bei einer PWA um eine Webseite mit App-ähnlichen Eigenschaften, die im normalen Webbrowser läuft. Ihr Sinn und Zweck besteht darin, das Beste aus beiden Welten zu verbinden, um eine optimale User Experience zu schaffen.“ So erklärt uns Jan den USP von Progressive Web Apps. Der Weg in die App ist für den User einer PWA wesentlich kürzer: einfach klicken und loslegen. Wer eine Native App verwenden will, muss diese erst in einem App Store downloaden und installieren.

Der namensgebende Ausdruck „progressive“ steht dafür, dass PWAs unabhängig von Betriebssystem und Browser von jedem User verwendet werden können. Je nach Verfügbarkeit im Browser werden die Features der App stufenweise, also progressiv, für den User verfügbar gemacht. Das Wichtige dabei ist, dass diese Features nicht funktionsnotwendig sind, sondern dem User nur ein Plus an Möglichkeiten bieten.

Das „Look and Feel“ einer PWA verhält sich auf einem Smartphone oder Tablet ähnlich einer nativen App, während es auf einem Laptop oder einem Desktopgerät ein eigenes Fenster öffnet und dem User den Eindruck eines eigenständigen Programms geben.

Große Unternehmen setzten bereits auf PWAs

Wer nach Beispielen für PWAs sucht, stößt schnell auf große Namen: Twitter, Alibaba und Financial Times haben ihre mobilen Webseiten ersetzt und vielleicht schon bald auch ihre nativen Apps. Auch die bekannte Coffeeshop-Kette Starbucks setzt auf die progressive App: Wie man es von gängigen nativen Apps gewohnt ist, bietet auch die Starbucks-PWA die Möglichkeit, ein Konto zu erstellen, nach Filialen zu suchen und Getränke zu bestellen. Das Layout ist komplett responsive und passt sich somit ideal an das Format und die Größe des Endgeräts an. In bester PWA-Manier ist sie natürlich offline-fähig und es lässt sich ein Link am Homescreen hinzufügen. Ein weiterer bekannter Anwender ist Tinder. Mit dem Einsatz einer PWA wurde vor allem die Ladezeit verkürzt: von 11,91 Sekunden auf 4,69 Sekunden, was das Engagement der User steigert. Die Tinder-PWA ist aufgrund des reduzierten Downloads 90 % kleiner als die native Android App.

Ein Mittel gegen „App-Müdigkeit“

Der Boom der PWAs kommt nicht von ungefähr. Die Anzahl der App Downloads verringert sich rund um den Globus, insbesondere dort, wo der Markt für mobile Geräte und Apps gesättigt ist. Dieses Phänomen wird als „App-Müdigkeit“ bezeichnet. „Die kontinuierlich steigende Zahl an verfügbaren Apps ist für User einfach überwältigend. Viele Nutzer beschließen gleichzeitig, die Anzahl der Apps auf ihren Geräten zu limitieren“, so Jan. Der Experte rät Unternehmen, die Erwartungen an Downloadzahlen für mobile Geräte herunterzuschrauben und auf neue Strategien zu setzen.

PWAs weisen ähnliche Merkmale wie Apps auf, ersparen den Nutzern aber einen datenintensiven Download. Das macht sie ideal für Gelegenheitsnutzer. Apps von Einzelhandelsunternehmen werden in der Regel selten heruntergeladen, da sie Speicherplatz am Handy verbrauchen und von den Usern nur selten genutzt werden. Hier könnten die Händler eine App für treue Kunden erstellen und eine PWA für alle anderen Situationen einsetzen.

Team bei der Konzeption von Progressive Web Apps

Die Vorteile von PWAs im Überblick

Doch was sind die konkreten Vorteile von PWAs? Jan hat für uns seine Top fünf Benefits zusammengefasst:

#1 Weder Download noch Installation notwendig

Eine PWA ist über eine URL im Internet zugänglich und wird im Browser ausgeführt, wodurch sie grundsätzlich auf verschiedenen Betriebssystemen läuft. Außerdem ist sie unabhängig von einem App-Store verfügbar und benötigt weder Download noch eine klassische Installation. Beim Besuch der Webseite erhalten die User den Hinweis, dass ein Link am Homescreen hinzugefügt werden kann. Anschließend kann der User die PWA wie eine ganz normale App verwenden.

#2 PWAs funktionieren auch offline

Im Unterschied zu einer herkömmlichen Web App kann eine Progressive Web App auch offline ausgeführt werden. Dazu legt man auf dem Homescreen eines internetfähigen Geräts eine Verknüpfung mit der entsprechenden URL an. Damit lässt sich die App einfach aufrufen – auch wenn nur eine schwache oder gar keine Internetverbindung besteht. Voraussetzung dafür ist der Support von Service-Workern. Dabei handelt es sich um eine Technologie, die sich in die Verbindung zwischen Browser und Server einklinkt und je nach Konfiguration schon gespeicherte Infos zurückliefert, anstatt sie "frisch" aus dem Internet herunter zu laden.

#3 Schneller Download und kurze Ladezeit

Im Normalfall benötigt eine PWA wesentlich weniger Datenvolumen als der Download einer nativen App. Denn anders als bei einer App, die im Download bereits sämtliche Ressourcen enthält, greift eine PWA nur dann auf die Funktionen zu, wenn sie gebraucht werden. Ein weiterer großer Vorteil von Progressive Web Apps ist die kurze Ladezeit. Vor allem im Vergleich zu mobilen Webseiten werden diese viel schneller geladen. Dieser Effekt wirkt sich wiederum positiv auf Conversions beispielsweise in Onlineshops aus. „Es ist ganz einfach: Höhere Geschwindigkeit ist gleich verbesserte User Experience und somit eine Steigerung der Conversion“, fasst Jan zusammen.

#4 Höchste Anpassungsfähigkeit

Eine zentrale Codebasis sorgt bei PWAs für plattformunabhängige Entwicklung. Das bedeutet, dass sie in jedem Browser und auf jedem Gerät, unabhängig von Plattform und Betriebssystem, lauffähig sind. Ihr Funktionsumfang passt sich jedoch an die eingesetzte Hardware und die Browserfunktionen an. Die Features einer PWA wachsen also mit den Gegebenheiten des genutzten Browsers und Endgeräts.

#5 Auffindbarkeit durch Suchmaschinen

Während die Inhalte nativer Apps nicht auf Google & Co auffindbar sind, werden alle Seiten von PWAs im Google Index gelistet und auch entsprechend gerankt. Dank ihrer URL-basierten Struktur können die Inhalte gemäß den aktuellen SEO-Richtlinien angepasst und optimiert werden. Das ist in Bezug auf die digitale Unternehmensstrategie und Auffindbarkeit ein klarer Vorteil.

Die Entwicklung einer PWA

Trotz vielerlei Vorteile gibt es Funktionen, die eine native App nicht abdecken kann. Je nach Anforderung ist es durchaus möglich, dass eine native App die bessere Lösung ist. „Für aufwändige Spiele oder 3D-Programme würde ich auf jeden Fall eine native App empfehlen,“ so Jan, „da eine PWA grundsätzlich weniger Zugriff auf das Gerät hat als eine native App und die Ressourcen daher nicht optimal nutzen kann.“ Vor allem bei der Arbeit mit Kunden ist es also wichtig, möglichst gut zu verstehen, was gewünscht ist, um eine optimale Empfehlung abzugeben.

Code einer Progressive Web App

Von der Konzeption zur App

Auf dem Weg zu einer PWA ist eine Website in responsivem Design schon fast die halbe Miete. Verglichen zu nativen Apps sind PWAs etwas im Vorteil, da sie für eine gemeinsame Plattform – also den Browser – entwickelt werden und nicht für unterschiedliche Betriebssysteme wie iOS und Android. Vom Workflow her ähnelt die Erstellung einer PWA dem einer Webseite.

Bei der Konzeption muss jedoch das Smartphone als primäres Endgerät berücksichtigt und das User Interface an die Größe des Screens angepasst werden. Dementsprechend sollten wichtige Elemente der App aus ergonomischen Gründen in Reichweite des Daumens positioniert werden. Denn letztendlich steht die User Experience im Vordergrund.

Karriere in der Entwicklung von PWAs

Aktuell zählen PWAs zu den neuesten Trends der Online-Branche. Während große Unternehmen langsam auf das neue App-Format setzen, befassen sich auch viele kleinere Player und Agenturen zum ersten Mal mit dem Thema. Wer sich also mit PWAs auskennt, ist gut beraten, es im Lebenslauf hervorzuheben. Neben Konzeptionisten sowie UX- und UI-Designer spielen vor allem Frontend Web-Entwickler in der technischen Umsetzung eine wichtige Rolle und können ihr Talent unter Beweis stellen.

Fazit: viele Vorteile für User und Unternehmen

Viele Vorteile progressiver Web-Apps sind offensichtlich, weshalb sowohl App-Anbieter als auch Nutzer große Hoffnungen in das PWA-Format setzen. Jedoch sollten sich Unternehmen darüber im Klaren sein, was sie von Web-Anwendungen erwarten und die Stärken und Schwächen von PWAs abwägen, ehe sie sich entscheiden. Zwar können native Applikationen die Ressourcen der Endgeräte besser ausschöpfen, jedoch benötigen viele Apps gar keine derart tiefe Einbeziehung der Soft- und Hardware. Insofern ist das PWA-Format für die meisten Anwendungen durchaus interessant und bietet zweifelsfrei viele Vorteile für ihre Nutzer und Kunden.

Du bist Entwickler und auf der Suche nach einer neuen Herausforderung im Bereich IT und Digitalisierung? Wirf einen Blick in unsere Jobbörse und starte jetzt mit AVANTGARDE Experts durch!

 

Bildnachweis: Titelbild: © Gorodenkoff/Adobe Stock, Bild 1: © Gorodenkoff/Adobe Stock, Bild 2: © Gower/Unsplash, Bild 3: © Oleksii/Adobe Stock

Team diskutiert über PWAs