27.08.2018, Know-How

Progressive Web Apps: Mehr als nur ein Hype?

PWAs sind dieser Tage in aller Munde. Sie versprechen, das Beste aus der Nativen- und der Web-Welt zu kombinieren. Was aber sind PWAs? Was sind die Vor- und Nachteile? Sind sie mehr als nur ein Hype?

 

 

Seit der Geburtsstunde der Smartphones, bzw. spätestens seit sie zu unseren ständigen Begleitern geworden sind, stellt sich die Frage, wie das mobile Zielpublikum am besten erreicht werden kann. So werden wir in unserer täglichen Arbeit oft der Frage konfrontiert, ob es genügt, eine responsive Webseite anzubieten, oder ob auch in eine native App investiert werden soll, die in den App-Stores angeboten werden kann.

In den meisten Fällen kamen wir zum Schluss: Eine mobil optimierte Website ist heutzutage ein Must, aber für viele Anwendungsfälle ist auch eine native App gefragt. Denn: Um ein Optimum an User Experience und Sicherheit zu bieten und von einem vollen Zugriff auf sämtliche Gerätefunktionen wie offline, Push, Kamera zu profitieren, ist eine native App meist der beste und oft auch der einzige Weg, um mobile Kunden zu gewinnen und langfristig zu halten.

Im 2015 hat nun Google einen neuen Ansatz für das mobile Web vorgestellt: Progressive Web Apps (PWA). Sie versprechen, die User Experience und Möglichkeiten von nativen Apps in einem mobilen Webbrowser zu bieten. Mittlerweile ist ein regelrechter Hype um PWAs ausgebrochen und grosse App-Anbieter wie Twitter, Pinterest oder Alibaba experimentieren damit.

In diesem ersten Teil unseres Blogposts zeigen wir auf, was PWAs eigentlich sind, wie sie funktionieren und analysieren ihre Vorteile und Limiten. Im zweiten Blogpost – Unsere erste PWA ist live! – machen wir den 1:1 Vergleich einer PWA und einer nativen iOS App anhand verschiedener Kriterien.

 

Was sind Progressive Web Apps?

 

Vom Look & Feel her sind PWAs nativen Apps sehr ähnlich. Es sind aber in Wirklichkeit keine Apps, sondern «nur» Webseiten. Keine klassischen Webseiten im herkömmlichen Sinn allerdings, denn sie bieten eben einiges mehr.

Ein kurzer Exkurs über die Technologien dahinter:

  • Die «App-Shell» ist der HTML5, CSS3 und JavaScript Code, der das Interface der App baut. Das Interface ist der statische Teil der App. Die App-Shell wird auf dem Gerät gecacht und wird bei einem App-Aufruf sofort geladen.
  • Der App-Inhalt ist dynamisch und wird bei verfügbarer Internetverbindung aktualisiert. Wie in nativen Apps werden Inhalte via Webservice Calls geladen und durch den Client gerendert. Dadurch unterscheiden sich PWAs massgeblich von klassischen Webseiten, die bei jedem Request Inhalt und Layout auf Serverebene zusammenführen und zusammen an den Client liefern.
  • Die Haupttechnologie von PWAs sind Service Workers. Ein Service Worker ist JavaScript-Code, der im Hintergrund läuft. Er kann z.B. Für Netzwerk-Requests, Push Notifications, Verbindungsänderungen und vieles mehr dienen. Ein Service Worker fungiert als Proxy/Middleware für solche Requests. Er basiert auf HTTPS, um Man-in-the-Middle Attacken zu verhindern.
  • Oft werden bei der Entwicklung von PWAs Frameworks wie React oder Angular verwendet, die auch bereits ein Set Service Workers beinhalten.

 

Vorteile von PWAs gegenüber responsive Websites

 

Wie bereits erwähnt, sind PWAs Webseiten. Sie werden via Browser geladen und können als Icon dem Gerätescreen hinzugefügt werden, wie jede andere Webseite auch. Das Design von PWAs passt sich den Screengrössen des jeweiligen Geräts an, aber auch das unterscheidet PWAs noch nicht von normalen responsive Websites. Wo also liegen die Hauptunterschiede von PWAs im Vergleich zu Webseiten?

PWAs bieten einige Funktionalitäten, die bislang nativen Apps vorbehalten waren:

  • Kurze Ladezeiten: Die Inhalte werden via Web Services geladen, wie bei einer nativen App, was die Ladezeiten stark verkürzt.
  • Push Notifications: Auf Android-Geräten können PWA-Nutzer Push-Notifications empfangen (auf iOS ist diese Möglichkeit zurzeit noch nicht vorhanden).
  • Offline-Verfügbarkeit: Dank dem Service Worker wird der Inhalt gecacht, sodass dieser auch bei nicht vorhandener Internetverbindung angezeigt werden kann.
  • App-ähnliche User Experience: Wenn vom Homescreen geladen, haben PWAs keine URL/Browser Navigation wie mobile Websites. Deshalb – und auch dank der raschen Ladezeiten – kommt eine PWA der User Experience einer nativen App sehr nahe.
  • Sicherheit: Die Verbindung basiert immer auf HTTPS und schützt somit gegen Angriffe.

 

Sind PWAs Alternativen zu traditionellen Webseiten?

 

Ja, können sie sein. Indem sich ihr Layout an jede Screengrösse anpasst, können sie von von mobilen wie auch von stationären Geräten genutzt werden. So gesehen könnte also jede Firmenwebseite eine PWA sein. Die Tatsache, dass heute über 50% aller Browser-Zugriffe mobil erfolgen, legt den Schluss nahe, dass künftig wohl immer mehr neue Webseiten als PWA gebaut werden, speziell in jenen Fällen, wo Zusatzfunktionen wie Push oder Offline-Nutzung gefragt sind und die Website primär auch mobil genutzt wird.

Technologisch bedingt dies jedoch einige Voraussetzungen: das CMS/Backend muss Schnittstellen bieten (zB. RESTful), damit PWAs auf das Backend zugreifen können. Betreffend UI/UX-Konzeption bleibt der Aufwand, Design und Funktionsumfang für unterschiedliche Gerätegrössen zu konzipieren, jedoch derselbe. Das Vorgehen kann sich aber ändern: während heute viele Firmen noch zuerst eine Desktop-Version designen und danach an mobile Geräte denken, setzt sich mit PWAs wohl der Mobile-First-Gedanke durch.

Auch bereits bestehende Webseiten können graduell zur PWA upgegradet werden, in dem sie z.B. mit Funktionalitäten wie Push, rascheren Ladezeiten und Offline-Verfügbarkeit erweitert werden.

 

Vorteile von PWAs im Vergleich zu nativen Apps

 

Wie dargelegt, holen PWAs betreffend UX und Funktionsumfang gegenüber nativen Apps auf und können so bis zu einem gewissen Grad das Beste aus beiden Welten kombinieren.

Einige Highlights, die PWAs nativen Apps voraushaben:

  • Reichweite: PWAs können via Browser-Suche gefunden werden. Dies führt potentiell zu einer grösseren Reichweite, als wenn eine App nur in den Stores verfügbar ist. Allerdings lassen sich auch native Apps oder App-Inhalte via Deep Linking im Browser finden, allerdings bedingt dies speziellen Aufwand, und für die Installation braucht es den Umweg über die Apps Stores.
  • Einsparungen in der Entwicklung: PWAs müssen nur für eine Plattform entwickelt werden, was zu Einsparungen in der Entwicklung führt, im Vergleich zu einer nativen Entwicklung für iOS und Android. Auch App-Updates sind einfacher, da sie jederzeit durchgeführt werden können, ohne die App wieder einreichen zu müssen.
  • Keine Einschränkungen in den App-Stores: Sämtliche Regeln, die Apple und Google für die Apps aufstellen, damit sie in den Stores angeboten werden können, gelten nicht für PWAs. Auch fallen die Abgaben von 30% für den Verkauf von digitalem Content in den Apps weg.

 

Wo liegen die Grenzen von PWAs?

 

Auch wenn PWAs vielversprechende Vorteile gegenüber klassischen Webseiten und nativen Apps bieten, so müssen auch ihre Einschränkungen und Grenzen berücksichtigt werden, bevor man sich für diesen Weg entscheidet.

Die funktionalen Einschränkungen sind:

  • Kein voller Support auf iOS: Seit Safari 11.1 und iOS 11.3 laufen PWAs grundsätzlich auch auf Apple Geräten, jedoch mit einigen Einschränkungen. Zum Beispiel bietet Apple keine Push Notifications für PWAs. Auch der Zugriff auf private Daten auf dem Device oder Synchronisationen im Background sind nicht möglich. Und will man eine PWA auf einem Apple Gerät installieren, gibt es keinen Web-App-Banner wie bei Android, der anzeigt, dass man eine PWA installiert. Stattdessen muss man die Funktion «Zum Home-Bildschirm» im Share Sheet nutzen.
  • Eingeschränkter Zugriff auf Hardware-Features: Auf beiden Plattformen – iOS und Android – können PWAs nur eingeschränkt auf Hardware-Funktionen wie NFC oder Bluetooth oder auf Geräte-Sensoren wie Accelerometer oder Fingerprint zugreifen.
  • Für ARKit, CoreML, Siri und viele SDKs braucht es native Apps: Die neuesten Toolkits für Augmented Reality, Machine Learning und Voice Assistants können nur via native Apps genutzt werden. Auch viele weitere SDKs, die es heute gibt, um die Funktionen von nativen Apps zu erweitern (z.B. Barcode Scanners, Video Players etc.) können innerhalb von PWAs nicht genutzt werden.

Der geplante Funktionsumfang einer App bestimmt also hauptsächlich, ob eine PWA eine Alternative zu einer nativen App sein kann. Aber es gibt auch aus Sicht Marketing weitere Aspekte, die zu berücksichtigen sind:

  • Eingeschränkte Monetarisierung: Viele App-Anbieter verkaufen ihre App oder Funktionalitäten innerhalb der App. Der Verkaufsprozess wird dabei von den App-Stores unterstützt, was es bei PWAs nicht gibt. Die Prozesse rund um Verkäufe müssen durch den App-Anbieter selber angeboten werden. Auf der anderen Seite fallen dadurch natürlich auch die Provisionen an die Stores weg.
  • Marketing-Effekt der App-Stores entfällt: Auch wenn es heute schwieriger ist als früher, als App im Store aufzufallen, sind die Stores heute noch immer die erste Adresse für Leute, die nach einer neuen eine App suchen. Vor allem auch bereits erfolgreiche Apps profitieren von einem Marketingeffekt, wenn sie in den Stores gelistet werden.
  • «Preferred Supplier Status» schwieriger zu erreichen: Wenn es eine App mal auf den Homescreen eines Anwenders geschafft hat, so geniesst der App-Anbieter einen gewissen Status als bevorzugter Anbieter. Wohingegen PWAs über eine Stichwortsuche zwar einfacher gefunden werden, dann aber bei einer nächsten Browsersuche eventuell auch rascher durch eine andere PWA abgelöst werden.

 

Wie entscheide ich mich?

 

Der Entscheid, wie ich meine mobile Zielgruppe am besten erreiche, ist keine einfacher und hängt von verschiedenen Kriterien ab, wie dem gewünschten Funktionsumfang, der Reichweite, dem verfügbaren Budget usw.

Es gibt Pros und Cons für jeden Weg und schlussendlich müssen für jeden Fall verschiedene Faktoren vorsichtig evaluiert und beurteilt werden, bevor ein Entscheid gefällt werden kann. Das wichtigste Kriterium ist dabei der Funktionsumfang: Wenn ein voller Support auf Apple-Geräten und ein uneingeschränkter Zugriff auf Device-Funktionen, Toolkits und SDKs gefordert ist, kommt eine PWA als Ersatz für eine native App zurzeit noch nicht in Frage.

Erwähnenswert ist auch, dass sich viele grosse Anbieter entschieden haben, PWAs und native Apps gleichzeitig anzubieten, wie etwa Pinterest, Twitter und Facebook. Einige nutzen PWAs auch nur für einen eingeschränkten Funktionsumfang oder wohl zunächst auch zum Experimentieren. Eine Übersicht von aktuellen PWAs finden Sie hier: https://pwa.bar/

 

Eine native App im Direktvergleich mit einer PWA

 

Wir haben eine unserer iOS Apps als PWA nachgebaut und die beiden Apps einem Vergleich unterzogen. Erfahren Sie die Ergebnisse in diesem Artikel: Unsere erste PWA ist live!

 

 

Weiterempfehlen: