Sie wollen Ihre Webseite auch offline zur Verfügung stellen?

Dann könnten Progressive Web Apps was für Sie sein!

Wollten Sie schon immer einmal während eines langen Fluges Ihren Lieblings-Webshop durchstöbern, konnten jedoch nicht darauf zugreifen, weil Sie kein Internet hatten? Mit den modernsten Web-Technologien gehört dies der Vergangenheit an. 

In den nächsten Minuten möchte ich Ihnen das grundlegende Konzept der Progressive Web Apps, sowie Vor- und Nachteile näherbringen. Und vielleicht möchten dann auch Sie Ihre Webseite mit den neusten Technologien ausstatten.

Was sind PWAs?

Progressive Web Apps sind Webanwendungen, die die Vorteile einer nativen App und einer responsiven Webseite vereinen. Sie fühlen sich wie gewöhnliche Apps an, benutzen beinahe dieselben Funktionen und sind offline wie auch bei schlechter Internetverbindung verfügbar. Alles, was wir sonst nur von gewöhnlichen Apps erwarten, können wir dank modernen Technologien mit einer normalen Webseite (über Chrome, Edge, Firefox usw.) erreichen

Charakteristik

Doch was zeichnet nun eine PWA aus?

Responsiv: Ob Laptops, Tablets, Fernseher, Handys oder sonst ein Monitor mit einem Browser, PWAs funktionieren auf jedem Gerät. Sie passt sich wie Flüssigkeit einem Gefäss an.

© www.giphy.com

Verknüpfbar: Die Apps teilen? Nichts einfacher als das – man kopiert die URL und versendet diese.

Sichtbarkeit: PWAs sind anders als mobile Apps einfacher zu vermarkten. Da sie im Kern normale Webseiten sind, werden sie auch in Suchmaschinen gefunden. Somit können Sie auch unsere Tipps von «SEO mit Pimcore» anwenden. Zusätzlich sind sie im Google Play Store und hoffentlich bald auch im App Store zu finden.

Zuverlässig: Wie auch alle gewöhnlichen mobilen Anwendungen sind die PWAs offline oder bei schlechter Verbindung nutzbar. 

Nie downasaur | © w-vision AG
© w-vision AG

Progressive: Auf alten Browsern und Geräten laufen sie wie gewohnt und auf den neusten werden die Funktionen vollumfänglich verwendet.

Fesselnd: Sie können den Benutzer zurück zur Webseite locken, mit von Ihnen generierten Push-Benachrichtigungen. Diese Funktion läuft im Moment nur auf Android Geräten.

Sicher: Die Verbindung zwischen Ihnen und der App ist gegen Dritte geschützt, die versuchen, Zugang zu Ihren Daten zu erhalten.

Vorteile

Updates gehören der Vergangenheit an, da Progressive Web Apps automatisch aktualisiert werden. Dabei spart man nicht nur Zeit, um die Apps aktuell zu halten, die PWAs benötigen auch bis zu 92% weniger Speicherplatz.

Dazu kommt noch die App-Müdigkeit. Der Smartphone-Benutzer hat seine Apps, die er häufig nutzt, bereits installiert. Der App-Store wird nur noch selten aufgerufen und somit werden kaum neue Apps installiert. PWAs müssen nicht im Store gesucht werden. Über Suchmaschinen gelangt man ganz einfach auf die gewünschte Seite. Anschliessend kann man mit nur einem Klick eine Verlinkung auf dem Smartphone-Homescreen erstellen. So lässt sich die Webseite ab sofort wie eine native App öffnen. Die man anschliessend mit einem Klick, der Startseite hinzufügen kann.

Die Entwicklungskosten, im Vergleich zur Entwicklung von zwei nativen Apps für iOS und Android, fallen um einiges geringer an. Natürlich hängt dies vom Umfang der Webseite ab. 
Das «Offline-zur-Verfügung-stellen» einer kleinen Landingpage kostet natürlich weniger, als das eines kompletten Webshops.

© www.giphy.com

Einschränkungen

All dies klingt nun wie der wahrgewordene Traum jedes Kunden, jedoch muss ich Sie nun leider enttäuschen. Wie überall gibt es auch hier eine Schattenseite.

Nicht alle Funktionen, die wir von gewöhnlichen Apps kennen, können von PWAs verwendet werden. So haben sie zum Beispiel keinen Zugriff auf die Kontaktliste oder können keine SMS versenden. Viele von diesen Funktionen werden zum Glück nur selten benötigt.

Und leider gibt es auch hier einen Spielverderber. In diesem Fall ist es Apple. Mit iOS und dem Browser Safari werden nur sehr wenige Funktionen unterstützt. So sind zum Beispiel Push-Benachrichtigungen, Hintergrund-Synchronisation sowie Bluetooth nicht verfügbar. Doch auch sie machen Fortschritte und werden hoffentlich bald komplett auf den PWA-Zug aufspringen. Die Liste der unterstützten Funktionen könnte man nämlich noch gehörig erweitern.

Was nun?

Sie haben nun einige Informationen darüber erhalten, was PWAs tun können und was nicht. Der Hauptzweck von PWAs ist die Verbesserung des Benutzererlebnisses. Dies kann auf ganz verschiedene Arten geschehen. Um sich das etwas besser vorstellen zu können, möchte ich Ihnen drei Beispiele von entwickelten und erfolgreichen PWAs näherbringen. Sie alle unterscheiden sich in ihrer Umsetzung ein wenig.

Von Grund auf

Wenn Sie bereits an einen neuen Webauftritt denken, ist jetzt die perfekte Gelegenheit, das Projekt anzupacken.

Ein Beispiel dafür ist AliExpress. Sie haben sich vor knapp einem Jahr dazu entschlossen, Ihren Webshop in eine PWA zu konvertieren. Davor versuchten Sie es mit einer normalen Webseite, die für den mobilen Gebrauch optimiert wurde. Dies ging aufgrund eines schlechten Benutzererlebnisses gründlich in die Hosen.

Sie beschlossen, in eine browserübergreifende Progressive Web App zu investieren. Die Entscheidung verbesserte die Benutzerfreundlichkeit des Webshops erheblich.

  • 104% Steigerung der Conversions für neue Benutzer
  • 2-mal mehr besuchte Seiten pro Sitzung.
  • 74% Erhöhung der Sitzungsdauer pro Sitzung

Eine einfache Version

Eine weitere Variante besteht darin, eine simplere Version der Webseite zu gestalten oder eine Kernfunktion (Newsbereich, Kalkulator) als PWA zur Verfügung zu stellen. 

Continental realisierte ein eigenes Konzernmagazin über die Mobilität der Zukunft. Somit konnten sie sich auch mit der Webseite ein Stück weit in die Zukunft katapultieren. Die News sind offline lesbar und Push-Benachrichtigungen erlauben es ihnen, den Benutzer auf neue Beiträge aufmerksam zu machen und somit die Besucheranzahl zu erhöhen.

Eine einzelne Funktion

Schon mit einzelnen Funktionen lässt sich das Benutzererlebnis erheblich verbessern. Für grössere Firmen, die nicht eine komplette Seite neu erstellen möchten, ist dies die perfekte Lösung.

Ein Beispiel dafür ist «The Weather Company». Sie haben sich entschieden, die für sie und den Kunden wirkvollste Funktion offline zur Verfügung zu stellen.

Die sogenannten Push-Benachrichtigungen, die dem Benutzer das Wetter von abonnierten Orten direkt auf dem Startbildschirm anzeigen, so wie wir es von normalen Apps gewohnt sind, erachteten sie als wichtigste Funktion.

Das Beeindruckende? Sie gingen mit über 60 Sprachen an den Start und verzeichneten in den ersten drei Monaten über 1 Million Anmeldungen (Opt-ins).

Fazit

Progressive Web Apps bieten viele Vorteile. Doch einer sticht meiner Meinung nach stark heraus. Dem Kunden die bestmögliche Web-Erfahrung zu bieten, sei es mit Push-Benachrichtigungen oder der offline Funktionalität.

Jedoch muss man auch bedenken, dass die Nutzung von PWAs noch mit einigen Einschränkungen verbunden ist. So ist Apple noch immer kein Freund davon und hinkt hinterher.

Ob Sie sich nun für eine Progressive Web App entscheiden, liegt ganz bei Ihnen. Doch die Beispiele zeigen, dass es sich lohnen kann, wenn man sich an die Umsetzung einer PWA traut.

Wenn Sie noch immer nicht überzeugt sind und mehr Erfolgsgeschichten von PWAs lesen möchten, finden Sie bei pwa.rocks oder pwa.bar weitere Beispiele.

Sie haben Anregungen oder Fragen zum Thema? Selbstverständlich gebe ich Ihnen in den Kommentaren gerne Auskunft.

Ihr Kommentar

Ob konstruktive Kritik, Fragen aufgrund von Unklarheiten oder einfach nur ein paar lobende Worte – wir bedanken uns schon jetzt für Ihren Kommentar. Nach einer kurzen Prüfung werden wir diesen veröffentlichen.

Teilen

    Zu allen Blog-Beiträgen

    Was packe ich in mein Webpack?