17
.
July
2018
|
Technology
Wir von mediawave möchten Sie in dieses zukunftsweisende Thema einführen. In diesem Beitrag erklären wir, was Progressive-Web-Apps sind und wo Vor- und Nachteile liegen. Im zweiten Teil gehen wir auf die Bedeutung von PWAs für SEO ein, zeigen Ihnen Best Practice Anwendungen und verraten, wie im Hause Magento, Shopware & Spryker mit dem Thema Progressive-Web-App umgegangen wird.
Um zu verstehen, was genau eine Progressive-Web-App ist und was sie beispielsweise von einer nativen App unterscheidet, ist es wichtig, sich klar zu machen, in welchem Kontext dieses Thema steht. Der Anteil der mobilen Internetnutzung in Deutschland betrug im Jahre 2015 bereits über 50 % und steigt weiter an. 2017 nutzten fast 65 % der User das Internet vorwiegend auf einem mobilen Endgerät. Mobile Zugriffe sind sehr Ladezeitsensibel und die User warten in der Regel nicht länger als 3 Sekunden bis eine Plattform vollständig geladen ist, bevor sie sie wieder verlassen. Auf was es ankommt ist also klar: Erreichbarkeit. Immer und überall, hohe Usability und beste Performance.
Eine Responsive Design Lösung ist meist weniger investitionsintensiv, gerade im Vergleich zu dem hohen Entwicklungsaufwand nativer Apps. Außerdem bietet Responsive Design dem Nutzer eine angemessene User Experience und stellt somit eine echte Alternative zur nativen App dar. Jedoch steigen die Erwartungen der Nutzer an die mobile Nutzung von Shops und Webseiten stetig an. In Bereichen schlechter oder überlasteter Netzabdeckung (z. B. U-Bahnen) haben Nutzer von nativen Anwendung gegenüber Responsive Webdesigns Vorteile, da Inhalte schneller übertragen werden können als Seiten eines Responsive Designs.
Eine Progressive-Web-App zeichnet sich vor allem dadurch aus, dass sie offline nutzbar ist. Durch sogenannte Service Worker werden Inhalte gecacht und stehen somit jederzeit zur Verfügung. Sobald die PWA mit dem Internet verbunden ist, aktualisieren sich die entsprechenden Inhalte. So verschwimmen die Grenzen zwischen Web-Anwendungen und nativen Apps. Push-Benachrichtigungen ermöglichen es zusätzlich, den Nutzer, ähnlich zu nativen Apps, wieder in die eigene Plattform zu holen.
Zusammengefasst ist eine Progressive-Web-App also eine Webseite mit bestimmten Eigenschaften einer nativen App, die via URL über den Browser aufgerufen werden kann. PWAs können allerdings ebenso im Look and Feel einer herkömmlichen App auf dem Homescreen von mobilen Endgeräten hinzugefügt werden, ohne dass sie als App im Store heruntergeladen werden muss. PWAs werden oft als Kombination aus nativer und responsiver Anwendung bezeichnet. Da sie die Vorteile beider Entwicklungsansätze vereinen, werden sie auch manchmal „Hybrid App“ genannt.
Auch eine Medaille hat immer zwei Seiten. Was sind also die Vorteile einer Progressive-Web-App und welche Nachteile hat eine PWA?
Für den Nutzer haben PWAs den klaren Vorteil, dass sie kaum Speicherplatz in Anspruch nehmen, da sie nicht installiert werden müssen und auch lästige Klicks durch den App-Store entfallen. Dies wiederum kommt den Betreibern von Progressive-Web-Apps zu Gute: Die Anwendungen unterliegen weder der Kontrolle noch dem Freigabeprozess durch Google oder Apple und auch die Verkaufsprovisionen werden hinfällig.
Zudem ist selbstverständlich die Offline-Nutzbarkeit der PWAs ein enormes Plus für beide Seiten. Kein Warten mehr auf Inhalte auf Seiten der Nutzer und das steigert natürlich die Conversion, was wiederum dem Händler gefällt. Außerdem gibt es selbstverständlich schon bei der Entstehung der Anwendung Vorteile - auch für Entwickler: PWAs sind enorm anpassungsfähig und funktionieren plattformunabhängig. Das bedeutet, dass bei der Konzeption nicht Android-, iOS- und Web-Entwicklung separat berücksichtigt werden müssen, sondern nur noch das Web als Plattform ausschlaggebend ist. Dieses Vorgehen spart Ressourcen und vereinfacht den gesamten Entwicklungsprozess.
Ein Nachteil von Progressive-Web-Apps ist die (noch) fehlende vollständige Browser- und Desktop-Unterstützung. Hier hinkt vor allem Apple leicht hinterher. Wo Nutzer älterer Browserversionen von Safari noch nicht alle Funktionen einer PWA nutzen können, arbeitet Google kontinuierlich an Optimierungen und ermöglicht die vorteilhafte Nutzung auf allen Android-Geräten mit aktueller Browserversion. Auch Microsoft und Mozilla verbessern die Nutzungsbedingungen weiterhin.
Außerdem hat natürlich auch eine PWA bestimmte Anforderungen: Die meisten PWAs nutzen REST-API-basierte Schnittstellen, die sich an den gängigen Regeln des Internets orientieren. Konkret bedeutet das, dass eine PWA, ist sie erstmal über eine Schnittstelle verbunden, nur mit passendem Backend-System einen Mehrwert liefert. So muss also ein Backend fähig sein, bestimmte Inhalte mit einer sicheren Verbindung zur Verfügung zu stellen.
Schlechte Conversion trotz langer Wunschlisten und voller Warenkörbe? Viele Shop-Betreiber kennen dieses Problem nur zu gut. Eine Progressive-Web-App kann helfen.
Durch die Offline-Nutzung werden dem User conversion-relevante Inhalte wie Produktseiten jederzeit zur Verfügung gestellt. Ob bei schlechter Verbindung in der U-Bahn oder gar im Flugmodus von München nach Paris: Die PWA bietet aktuelle Inhalte, stellt die optimale User Experience sicher und ist obendrein noch verschlüsselt, damit auch beim Check-Out nichts schief gehen kann.
Die bereits benannten Push-Benachrichtigungen können den User erinnern, dass seine vorgemerkten Artikel bald ausverkauft sind und ihn so zurück auf die Plattform holen. Da die Installation einer PWA ohne Weiterleitung zum App-Store möglich ist, können Online-Händler die eigene Marke leicht auf dem mobilen Endgerät platzieren. Einmal auf dem Home-Screen wird man schnell zum festen Bestandteil der Shopping-Gewohnheiten der Zielgruppe. Auch zur Steigerung des Traffic kann die Progressive-Web-App beitragen, da sie über Suchmaschinen auffindbar ist und so durchaus SEO-relevant.
Im zweiten Teil unseres Beitrags über Progressive-Web-Apps erfahren Sie weitere spannende Details über die Relevanz von PWAs in Bezug auf SEO und lernen Best Practice Beispiele kennen. Außerdem verraten wir, wie unsere Partner Magento, Spryker und Shopware mit diesem Ansatz umgehen.
