Progressive Web Apps

Die neue Webseiten Generation

Visualisierung Hinweis zum Startbildschirm zufügen

Falls du diese Seite auf einem mobilen Endgerät betrachten möchtest, kannst du den untenstehenden QR Code mit den passenden App auf deinem Smartphone oder Tablet PC scannen.

Beim Aufrufen auf einem Android Smartphone, wirst du eingeladen diese Seite auf deinem Homescreen zuzufügen. Beim betätigen des Icons, dass auf deinem Homescreen platziert wird, öffnet sich diese App als Standalone (also nicht mehr in deinem Browser),

Apple ist gerade dabei, diese Features ebefalls zu implementieren in Safari

QR Grafik zum scannen mit einem App um die Seite auf dem Smartphone zu betrachten.

Dies ist ein sehr einfaches Beispiel eines so genannten PWA (Progressive Web App).

Während meine Recherchen über das Thema "Digitalisierung & E-Coomerce", habe ich über diese neue Art der Webseiten erfahren und war fasziniert und angetan. Genau so begeistert wie vor acht Jahren, als ich das erste Mal in 2010 ein Artikel von Ethan Marcotte über RWD (Responsive WebDesign) gelesen habe.

Ich konnte es natürlich nicht unterlassen, umgehend das Thema praktisch zu erörtern. Und das Resultat betrachtest du in diesem Moment. Googles Browser Chrome bietet eine Erweiterung namens Lighthouse, mit der man diese neue Art der Webseiten testen kann. Unterstehend das Resultat dieses Tests meines Erstlings.

Resultat test dieser Seite in Lighthouse

Eigenschaften eines PWAs


Zugriff auf Foto App

Image of the cam app on a smartphone

Rechnungen Scannen

Bar-/QR Codes Scannen

Im Dialog mit dem Anbieter Fotos senden

Push Nachrichten

Image which visualises push notifacation

Wie im Native App können PWAs Push Nachrichten senden.

Eine gute Art und Weise personalized Customer Interaction und Marketing.

Ein sehr wichtiges Feature im modernen Commerce!

Icon auf Homescreen

Image of a home screen on a smartphone

Wie bei einem nativen App, kann man ein Icon auf dem Homescreen vom Smartphone/Tablet platzieren.

Dies ist auch bei "normale" responsive Webseiten möglich, aber bei einem PWA wird der User gefragt ob er die Seite auf dem Screen bookmarken möchte.

So hat ein User immer Zugriff auf die Seite

Beim Touch auf das Icon, wird die Seite direkt im Browser geöffnet und kann bedient werden.

Video Demonstartion

Das Video rechts zeigt, beim ersten Aufruf eines PWAs im Browser, dass der User die Option erhält diesen Web App auf seinem Homescreen zu speichern.

Wenn man dann den App mittels dem Touch-Icon öffnet, gibt es kein Browserfenster mehr, sondern die App öffnet sich als Standalone (kann im Manifest.json festgelegt werden).

Der Unterschied zwischen Browser- und Appfenster (ich wechsel zwischen beide Fenser) ist im Video deutlich zu sehen. Ein weiterer Unterschied ist der Splash Screen (die weiße Seite mit dem Logo zentriert platziert). Diese Splash Screens werden verwendet um eine Appähnlichen Benutzererfahrung zu erreichen. Sonst würde lediglich ein weißes Flackern erscheinen. Das Appfenster (Benachrichtigungsleiste) nimmt die Farben der Seite an (ebenfalls im Manifest.json festgelegt). Die App wird im Fullscreen Modus dargestellt ohne Browserfenster.

Beim Erstellen dem Shortcut auf dem Homescreen erscheint auch eine Meldung in der Benachrichtigungsleiste vom Smartphone ("Wird hinzugefügt" & "Wurde hinzugefügt").

Beim Löschen des Icons wird gefragt, ob man die App deinstallieren möchte. Obwohl eine Art Installation stattfindet, ist Dies kein Verlgeich mit der Installation einer nativen App. EinePWA beansprucht kein Speicherplatz.

Diesen Screencast habe ich zuhause erstellt. In meinem Kiez ist das Internet eher schlecht. Laut Telekom gab es Fehler bei den Steckplätzen. Beim Öffnen es Apps mithilfe es Touch-Icons, sieht man wie schnell die Seite lädt.

Dieses schnelle Laden wird ermöglicht, in dem man im Manifest.json festlegt welche Dateien bei der Installation auf dem Smartphone gespeichert werden. Unnötig zu sagen, dass man diese Option mit Bedacht anwenden sollte...


Diese Screenshots zeigen das Verhalten vom Firefox, wenn eine Progerssive Web App in diesen Browser geöffnet wird.

Add to Homescreen in Firefox Screenshot eins
Add to Homescreen in Firefox Screenshot zwei
Add to Homescreen in Firefox Screenshot drei

Progressive Web Apps können noch viel mehr als nur wie eine App installiert und geöffnet werden. Mit eine PWA können so genannte Push Nachrichten an User gesendet werden. Dies kann, wenn in Maße angewendet, ein gutes Marketing Tool sein.

Überdies kann eine PWA, wie eine native App, auf die Fuktionen eines Smartphones/Tablet PCs zugreifen. Zwei Beispiele sind die Kamera für Fotos ud Videos (Fotoss machen und süber die WPA senden z.B. Bei Produktbewertungen) und Voice Control. In nicht allzu ferner Zukunft werden PWA immer mehr wie native Apps agieren und reagieren können.

Keine Installation notwendig

Anders als bei Native Apps, können PWA auf sämtliche Endgeräte wie iOS, Android und Windows betrachtet und angewendet werden.

Bei Native Apps muss für jede Umgebung einen eigenen App entwickelt werden. Derartige Apps müssen aus einem App Shop wie z.B. Google Play, Microsoft Store oder iTunes runtergeladen und Installiert werden.

Dies ist bei PWAs nicht notwendig. Viele User empfinden es vermehrt als unkomfortabel für Dienstleistungen wie Shops eine App zu installieren. Aps fordern Speicherplatz, Akkuleistung (wenn sie im Hintergrund laufen).

PWAs können einfach im Browser, durch Eingabe der URL in der Adressleiste des Browsers, aufgerufen werden. Natürlich macht das Icon auf dem Homescreen das aufrufen um Einiges Komfortabler.

Untersuchungen haben gezeigt, dass die Mehrzahl der Apps als "Smartphoneleichen" ihr Dasein fristen. Ausser die Social Media Apps wie Twitter, Facebook und Instagram. Diese Apps werden regelmäßig angewendet.

SEO (Search Engine Optimization)

Im Gegensatz zu native Apps, können PWAs von den Suchmaschinen gefunden werden.

Dies stellt natürlich, aus Sicht des Marketings, einen enormen Vorteil dar.

Offline Nutzung

Durch so genannte Service Workers, ist es möglich eine PWA auch zu nutzen wenn die Internetverbindung unterbrochen wird.

Service Workers sind die mächtige Kerntechnologie hinter Progressiven Web Apps.

Im Grunde genommen ist ein Service Worker eine JavaScript Datei, die hinter den Kulissen – unabhängig von der eigentlichen App – arbeitet. Sie wird vom Browser gesteuert reagiert auf Events ohne Nutzerinteraktion (z.B. Ausfallen der Internetverbindung). Sie ermöglichen Offline-Funktionen, Push-Notifications, Aktualisierung von Inhalten im Hintergrund, Caching und noch vieles mehr.

Bild mit Darstellung coversionsrate

Vorteile eines PWAs


Vorteile auf einem Blick

  • Bessere Leistung
  • Schnelle Ladezeiten
  • Angenehme User Experience
  • Vermindeter Datenverbrauch
  • Weniger kostenintensive Entwicklung
  • Können für ätere Browser optimiert werden
  • Brauchen nicht von App Stores geprüft zu werden
  • Müssen von User nicht runtergeladen und Installiert werden

Konversionsrate und Re-Engagement

Diese Reibungspunkte stellen für den Nutzer einen Aufwand dar. Google hat einige sehr interessante Fallstudien zu Marken veröffentlicht, die mit unterschiedlichen Ziele und Strategien zu PWA wechseln und erstaunliche Ergebnisse erzielen.

Alibaba.com konnte Konvertierungen im mobilen Web um 76 % erhöhen, hauptsächlich, weil Nutzer die Anwendung nicht herunterladen müssen. Der Guardian konnte die Nutzer, die plattformübergreifend angemeldet sind, in weniger als einem Jahr um 44 % steigern, indem die nutzerorientierten Erfahrungen verbessert wurden

Konga, die führende E-Commerce-Website in Nigeria, hat die Datennutzung um 92 % beim anfängliche Ladevorgang und um 82 % beim Abschluss der ersten Transaktion reduziert, und so mehr Nutzern den Zugriff auf ihren Web Store ermöglicht.

Icon auf Homescreen

Wie bei einem nativen App, kann man ein Icon auf dem Homescreen vom Smartphone/Tablet platzieren.

Dies ist auch bei "normale" responsive Webseiten möglich, aber bei einem PWA wird der User gefragt ob er die Seite auf dem Screen bookmarken möchte.

So hat ein User immer Zugriff auf die Seite

Beim Touch auf das Icon, wird die Seite direkt im Browser geöffnet und kann bedient werden.

Diese Call-To-Action (Aufruf zum Handeln) und das anschliessende ablegen des Icons auf dem Homescreen erleichtern den User das erneute Besuchen einer Seite/Shop.


Seiten die anhand der PWA Methodik erstellt wurden


Lancôme

Bold von einem Screenshot der Lancome Website

Lancôme ist eine globale Luxusmarke von L'Oréal. Der Lancôme UX ist außergewöhnlich gut verarbeitet, um sicherzustellen, dass das mobile Erlebnis mit seiner gesamten Marke übereinstimmt.

Ich würde das mobile UX als eines der besten seiner Klasse betrachten. Barrierefreiheit und die Verwendung subtiler Interaktionsanimationen sind große Highlights.

Die Progressive Web App von Lancôme erhöhte auch die Anzahl von Conversions, mobilen Sitzungen und Engagements durch Push-Benachrichtigungen und andere Funktionen. Hier sind einige der wichtigsten Ergebnisse der progressiven Web-App von Lancôme:

  • 17% höhere Konversionsrate (Anzahl Käufe geteilt durch Anzahl Besucher)
  • 8% höhere Konversionsrate bei wiederhergestellten Einkaufswagen über Push-Benachrichtigungen
  • 15% weniger Absprungraten
  • 51% mehr mobile Sitzungen
  • 84% weniger Zeit beim Laden der Seite

Twitter Lite

Screenshot der Twitter Light Seite

Im Jahr 2017 hat Twitter seine Progressive Web App "Twitter Lite" als Standard-Web-Erlebnis für alle Nutzer weltweit eingeführt.

Mit über 80% der Nutzer auf Mobilgeräten wollte Twitter sein mobiles Web-Erlebnis verbessern, indem es schneller und ansprechender wurde, insbesondere weil sich viele seiner Nutzer in Gebieten mit langsamen, instabilen Netzwerkbedingungen befanden.

Twitter Lite lädt die Seiten sofort und senkt die Datennutzung, indem Bilder optimiert und auf zwischengespeicherte Daten zurückgegriffen wird.

Außerdem werden Nutzer mit Push-Benachrichtigungen erneut angesprochen und Benutzer können die Progressive Web App auf ihren Startbildschirmen hinzufügen.

Hier sind einige wichtige Ergebnisse von Twitter Lite:

  • 75% mehr Tweets gesendet
  • 20% Rückgang der Absprungrate
  • 65% mehr Seiten pro Sitzung
  • 20% weniger Absprünge

Pinterest

Screenshot Pinterest Seite

Lancôme ist eine globale Luxusmarke von L'Oréal. Der Lancôme UX ist außergewöhnlich gut verarbeitet, um sicherzustellen, dass das mobile Erlebnis mit seiner gesamten Marke übereinstimmt.

Ich würde das mobile UX als eines der besten seiner Klasse betrachten. Barrierefreiheit und die Verwendung subtiler Interaktionsanimationen sind große Highlights.

Die Progressive Web App von Lancôme erhöhte auch die Anzahl von Conversions, mobilen Sitzungen und Engagements durch Push-Benachrichtigungen und andere Funktionen. Hier sind einige der wichtigsten Ergebnisse der progressiven Web-App von Lancôme:

  • 17% höhere Konversionsrate (Anzahl Käufe geteilt durch Anzahl Besucher)
  • 8% höhere Konversionsrate bei wiederhergestellten Einkaufswagen über Push-Benachrichtigungen
  • 15% weniger Absprungraten
  • 51% mehr mobile Sitzungen
  • 84% weniger Zeit beim Laden der Seite

Washington Post

Screenshot Washington Post

Im Juni 2015 hat The Washington Post zusammen mit verschiedenen anderen Verlagen und Technologieunternehmen das Accelerated Mobile Pages Project entwickelt, eine Progressive Web App-Entwicklungsplattform, mit der The Post täglich mehr als 1.000 Artikel mit durchschnittlichen Ladezeiten von 400 Millisekunden veröffentlichen kann. Leistungssteigerung gegenüber ihrer traditionellen mobilen Website.

PWA-Technologie hat auch einen Anstieg der Anzahl der mobilen Suchbenutzer, die innerhalb von 7 Tagen auf die Website zurückkehren, um 23% gestiegen.

Die Washington Post hat eine Silbermedaille für ihre progressive Web-App gewonnen, die es ermöglicht, Geschichten sofort zu laden und umfangreiche Offline-Lesefähigkeiten zu bieten.

Hier die Optimierungen aufgelistet:

  • Ladezeiten von 400 Millisekunden - eine Leistungsverbesserung von 88% gegenüber der herkömmlichen mobilen Website.
  • PWA-Technologie hat auch einen Anstieg der Anzahl der mobilen Suchbenutzer, die innerhalb von 7 Tagen auf die Website zurückkehren, um 23% gesehen.

Mittel gegen App-Müdigkeit


Foto der die neue App Müdigkeit symbolisiert

Entwickler und Anwendungsleiter müssen jetzt einen Ansatz für die Einbindung von PWA in ihre gesamte mobile Entwicklungsstrategie formulieren. Das App-Modell der Zukunft zielt darauf ab, das Paradigma der mobilen App zu unterbrechen, indem es das Web-Erlebnis mit nativen App-Funktionen verbindet.

Der Zeitpunkt der nahenden Technologie-Wende kommt nicht von ungefähr: Das Tempo der App-Downloads verlangsamt sich in den meisten Verbrauchermärkten rund um den Globus, insbesondere dort, wo die Einführung mobiler Geräte ausgereizt ist. Dieses Phänomen wird als „App-Müdigkeit“ bezeichnet.

Gemeint ist eine Erschöpfung, bei der Benutzer von der Anzahl möglicher Apps überwältigt werden und deren Anzahl pro Gerät auf eine Obergrenze begrenzen. Unternehmen müssen daher ihre Erwartungen an Downloadzahlen mobiler Endgeräte herunterschrauben und Strategien neu bewerten.

PWA weisen app-ähnliche Merkmale auf, ersparen dem Nutzer aber einen oft datenintensiven Download. Das macht sie ideal für Nutzer einer Marke oder einer Dienstleistung, da es lediglich ein Icon auf dem Homescreen benötigt um direkten Zugriff auf die Firmenpräsenz zu haben ohne die URL in der Adressleiste mit der mobilen Tastatur eingeben zu müssen. Nach einer Branchenstudie lädt nur ein geringer Prozentsatz von Kunden eines Einzelhandelsunternehmens (10 bis 15 Prozent) dessen App herunter.


Der E-Commerce wird sich drastisch ändern durch die Erwartungen der User


Bild der den E-Commerce visualisiert

Durch die steigende Affinität der Menschen mit dem mobilen Web und die rasante optimierungen der Seiten und der E-Shops, werden auch die Anforderungen der User immer höher. Seiten sollen schnell laden, das Interface sollte intuitiv zu bedienen, angebehm und übersichtlich sein.

Das ist auch eine der Gründe, dass PWAs in Zukunft immer mehr zum Einsatz kommen werden

Darüberhinaus ändert sich ebenfalls der Lokale Kommerz und wird mehr und mehr als Erweiterung für den E-Commerce fungieren.

Die Ganze Trends der E-Commerce und das neue Konsumverhalten habe ich in eine PowerPoint Präsentation verfasst, Sie hier als PDF ansehen und downloaden können.

absoluter Pluspunkt in Sachen SEO. Dieses große Mehrwert-Paket führt letzten Endes zu mehr Traffic, höheren Conversion-Rates und folglich mehr Umsatz.


Zukunft der E-Commerce und Progressive Web Apps


Bild über Progerssive Web Apps im E-Commerce

Wovon Onlinehändler profitieren können

Für den E-Commerce ergeben sich mit dem Aufkommen der Progressive-Web-Apps zahlreiche Vorteile. Ein enormer Mehrwert eröffnet sich durch die Möglichkeit der Offline-Nutzung. Das bedeutet, dass Seiteninhalte wie beispielsweise Produktseiten für Nutzer auch dann verfügbar sind, wenn eine langsame oder gar keine Verbindung zum Internet besteht. Möglich machen das die sogenannten Service Worker. Durch sie fallen die letzten Grenzen, die native Anwendungen bislang von Webanwendungen unterschieden haben. Sie sind außerdem dafür verantwortlich, dass Produktseiten und Co. auch offline zur Verfügung stehen.

Volle Wunschlisten und Warenkörbe, aber dennoch wird der Check-Out-Prozess nicht erreicht? Ein Szenario, mit dem sich Onlinehändler häufig konfrontiert sehen. In Zeiten von PWA ist das bald Schnee von gestern. Dank der Möglichkeit, Push-Benachrichtigungen an Nutzer zu senden, können Kunden schnell und einfach zurückgewonnen werden. Anwender können außerdem dazu motiviert werden, die Anwendung auf dem mobilen Endgerät zu speichern – und das ganz ohne Weiterleitung zu einem App-Store. Und schon hat man die eigene Marke fest auf dem Tablet oder Smartphone des Kunden platziert.

Dank der Anpassungs- und Plattformunabhängigkeit müssen Entwickler mit iOS, Android und Web nicht mehr drei verschiedene Plattform bei der Konzeption einer Anwendung berücksichtigen, sondern nur noch eine Instanz – nämlich das Web. Auf Entwicklerseite ist dieses Vorgehen einfacher, auf Unternehmensseite können zusätzliche Kosten eingespart und die Gesamtbetriebskosten im Vergleich zur Entwicklung separater mobiler Websites bzw. nativer Apps deutlich minimiert werden.

Progressive-Web-Apps sorgen nicht nur für ein schnelles Shopping-Erlebnis und unmittelbare Aktualität, sie sind noch dazu über HTTPS gesichert und über Suchmaschinen auffindbar. Durch die Aufnahme in den Suchindex also ein absoluter Pluspunkt in Sachen SEO. Dieses große Mehrwert-Paket führt letzten Endes zu mehr Traffic, höheren Conversion-Rates und folglich mehr Umsatz.

In Zukunft werde ich auf diese Seite mehr über Digitalisierung und die damit verbundene Themen schreiben, weil mir die Zukunft enorm interessiert

In diesem Sinne, bedanke ich meine Besucher für die Zeit die ihr mir mit dem Lesen geschenkt habt und sende euch viele Grüße!