Sie benutzen einen alten Browser.

Bitte updaten Sie Ihren Browser damit Sie diese Seite so sehen, wie wir das geplant haben ...

Freitag, 21. September 2018 / Gepostet von Patrick Delz

PWA Teil 2: Möglichkeiten, Grenzen und Stärken

Progressive Web Apps - abgekürzt PWA - nutzen moderne Webtechnologien um im Browser ein App-ähnliches Erlebnis für den Benutzer zu schaffen. In diesem Teil unserer Serie wollen wir uns vertieft damit beschäftigen, was PWA heute für Möglichkeiten bieten und wo ihre Stärken liegen.

Für was steht «Progressive»?

Im ersten Teil dieser Serie hatten wir das grundsätzliche Konzept von PWA bereits vorgestellt und ihre wichtigsten Eigenschaften aufgeführt. Der explizite Ausdruck «progressive» im Namen steht dafür, dass sie von jedem Benutzer verwendet werden können, unabhängig welches Betriebssystem oder welchen Browser gerade benutzt wird.

Auch wenn der Begriff «App» etwas anderes suggerieren mag - nämlich ein Programm zum herunterladen und installieren - kann man sich PWA am besten als eine Art Werkzeugkasten mit modernsten Webtechnologien vorstellen, der es Entwicklern erlaubt Webseiten zu bauen, die schnell geladen werden und sich ähnlich wie eine App bedienen lassen.

PWA Beispiele

Was in diesem Werkzeugkasten alles drinsteckt - also welche Webtechnologien genau zum Einsatz kommen - werden wir uns in einem weiteren Teil unserer Serie anschauen. Jetzt geht es uns darum, ein paar konkrete Beispiele anzuschauen, damit Du einen eigenen Eindruck davon bekommst, was man mit PWA alles umsetzen kann.

Wenn man nach Beispielen für PWA googelt, stösst man schnell auf grosse Namen: Twitter hat seine App als PWA lanciert, andere Social Networks wie Facebook haben bereits die ersten Schritte gemacht. Viele bekannte Unternehmen aus den verschiedensten Bereichen setzen unterdessen auf PWA, um ihre mobile Webseite oder sogar ihre native mobile App zu ersetzen. Dazu gehören Alibaba, die Financial Times und andere.

Wir haben hier keine repräsentative Übersicht zusammengestellt, sondern die ausgewählten PWA sollen die grosse Bandbreite der Einsatzmöglichkeiten aufzeigen.
Am besten, Du öffnest die Links im Text auf Deinem Smartphone. Damit stellst Du sicher, dass Du wirklich auf der für Mobilgeräte entwickelten PWA-Seite des jeweiligen Anbieters landest. Und es gibt Dir gleich etwas Anwender-Erfahrung aus erster Hand.

Smashing Magazine

Link zur PWA App: https://www.smashingmagazine.com

Die Progressive Web App vom Smashing Magazine ist sehr schön umgesetzt. Sie ist offline-fähig und lässt sich zum Homescreen hinzufügen.

Starbucks PWA

Link zur App: https://app.starbucks.com

Die PWA von Starbucks fühlt sich bei der Benutzung sehr ähnlich an wie eine fest installierte App, inklusive der Möglichkeit ein Konto zu erstellen oder nach lokalen Filialen zu suchen. Das Layout ist komplett responsive und passt sich auch dem Hoch- und Querformat von Smartphone oder Tablet an. Auch sie ist offline-fähig und lässt sich zum Homescreen hinzufügen.

Trivago PWA

Link zur App: https://www.trivago.com/

Auch die Trivago-PWA ist offline-fähig und lässt sich zum Homescreen hinzufügen.

Guitar Tuner PWA

Nachfolgendes Beispiel zeigt die Differenzen der Browser und damit auch die aktuellen Grenzen von PWAs klar auf. Wenn nachfolgender Link mit einem Android Smartphone geöffnet wird, kann eine sehr gut umgesetzte PWA genutzt werden. Falls jedoch der Link mit einem Apple Device (iOS) geöffnet wird, erhält man die Meldung, dass der Browser kein Zugriff auf Audio zulässt und deshalb diese Web-App nicht zur Verfügung steht.

Link zur App: https://guitar-tuner.appspot.com

Guitar Tuner ist eine einfache App mit einer klaren Funktion. Sie nutzt die Schnittstelle (API) getUserMedia() um auf das Mikrofon des Geräts, auf dem sie aufgerufen wird, zugreifen zu können. Zudem unterstützt sie offline-Funktionalitäten (Cache API / Local Storage) und lässt die als Icon dem Homescreen hinzufügen.

Webseite Apps with love erweitert mit Service Workers

Link zur App: https://appswithlove.com

Weitere Beispiele

Auf www.progressivewebapproom.com findest Du einige weitere Beispiele.

Browser Kompatibilität für PWA

Im ersten Teil haben wir die Eigenschaft von PWA plattformunabhängig im Browser zu laufen als eines der wichtigsten Merkmale hervorgehoben. Das setzt allerdings voraus, dass jeder Browser die für PWA eingesetzten Technologien unterstützt. In der Praxis gibt es dabei natürlich Unterschiede, die nach dem aktuellen Stand aus unserer Erfahrung ungefähr so aussehen:

Auf dem Desktop-Rechner - also Windows oder Mac - gibt es grosse Unterschiede zwischen den einzelnen Browser. Grob sieht die Verteilung folgendermassen aus:

Auch hier passt unsere Analogie mit dem Werkzeugkasten wieder sehr gut. Nicht alle Browser und Plattformen bedienen sich im gleichen Umfang aus dem «PWA-Werkzeugkasten». Natürlich gibt es ein paar Funktionen die zwingend notwendig sind, damit eine PWA überhaupt funktioniert. Dazu gehören:

Wie weit jeder einzelne Browser die PWA-Funktionalitäten unterstützt, kannst Du einfach prüfen, indem Du die Seite https://whatwebcando.today aufrufst.

PWA nutzen ohne App Store Download

Wie Du selber festgestellt hast, lassen sich alle PWA via einem Link öffnen, wie man es sonst von Webseiten gewohnt ist. Es ist also nicht notwendig, einen App Store aufzusuchen und dort die App zu suchen und herunterzuladen.

Das macht sie auch aus SEO-Sicht interessant, da sie hier über alle Eigenschaften von herkömmlichen Webseiten verfügen: Sie lassen sich von Suchmaschinen indizieren, können über sie gefunden werden und der Link lässt sich mit Freunden und Bekannten wie gewohnt teilen.

Eine PWA wird also vom Betreiber genauso bereitgestellt, wie eine Webseite auch. Mit Windows hat Microsoft sich jedoch entschieden, einen etwas anderen Weg zu gehen. Hier werden PWA auch in den Windows Store aufgenommen. Ob auch die anderen grossen Stores - also der App Store von Apple oder der Google Play Store - hierbei nachziehen, bleibt abzuwarten. Auf jeden Fall wirft dies spannenden Fragen bezüglich der Geschäftsmodelle der Plattformbetreiber Apple (iOS) und Google (Android) auf.

Download nein danke!

Die Tatsache, dass PWA nicht via einen App Store heruntergeladen und installiert werden müssen, wird immer wieder als eines Hauptargumente für den Einsatz von PWA genannt. Dahinter steckt ein Phänomen, das oft mit dem Schlagwort «App-Müdigkeit» benannt wird. Um was geht's da genau?

Schaue mal selbstkritisch auf Dein Smartphone und überprüfe wie viele Apps Du installiert hast und wieviele davon Du regelmässig benutzt. Frage Dich, wie Deine Bereitschaft ist, neue Apps herunterzuladen und zu installieren?

Wenn Du bei der letzten Frage zum Schluss kommst, Du hättest eigentlich schon mehr als genug Apps auf Deinem Smartphone, dann befindest Du Dich in guter Gesellschaft mit anderen Anwendern. Und die Anzahl der App-Downloads ist in der Tat am zurückgehen. Dieses Phänomen wird wie oben bereits erwähnt, allgemein als „App-Müdigkeit« (App Fatigue) bezeichnet. Gemeint ist damit, dass immer mehr Anwender angesichts der Menge an verfügbaren Apps - und zwar bewusst oder unbewusst - die Anzahl der Apps auf ihrem eigenen Gerät begrenzen.

PWA und native Apps - jeder hat seine Stärken

Aus dem Phänomen der «App-Müdigkeit» sollte man aber nicht ableiten, dass den Progressive Web Apps die Zukunft alleine gehört. Wie wir in Gesprächen mit Kunden und Interessenten immer wieder erklären, kommt es in jedem Fall auf das Anwendungsszenario an, ob eine PWA oder eine native App die beste Lösung ist, denn PWA sind Webseiten mit «app-ähnlicher» Funktionalität. Damit unterscheiden sich rein technisch gesehen sehr stark von nativen Apps und das macht sie - wie gesagt je nach Anwendungsszenario - zur Alternative oder zur Ergänzung. Genauso gut kann es sein, dass für ein Projekt eine native Apps die beste Entscheidung ist. Ebenso wird es kaum der Fall sein, dass alle bestehenden Apps nun in PWA umgebaut werden müssen.

Für die meisten Menschen ist es heute selbstverständlich, das Internet von einem Mobilgerät aus zu nutzen - und diese Entwicklung befeuert natürlich native Apps wie PWA gleichermassen.

Diesem Trend zur mehrheitlich mobilen Internet-Nutzung trägt Google mit seinem Mobile-First-Index Rechnung. Der offizielle Roll-Out ist dieses Jahr gestartet. Der Index nutzt die mobile Version einer Webseite, um deren Relevanz für die mehrheitlich mobilen Nutzer zu bewerten. Dies ist natürlich nicht nur eine Aufforderung an alle Webseiten-Betreiber, ihren Webauftritt entsprechend anzupassen oder komplett zu erneuern, sondern es werden auch neue Technologien zur Umsetzung relevant.

PWA - also Progressive Web Apps - gehören zu diesen zukunftsgerichteten Technologien.

Kosten von PWA

Gute Ideen umzusetzen, kostet immer Geld - unabhängig davon ob als App oder PWA. Wir werden uns die Arbeit der Entwickler und die einzelnen Schritte in einem Projekt von der ersten Idee bis hin zur Promotion und dem Support im vierten und fünften Teil unserer Serie näher anschauen. So klar die rein technischen Unterschiede zwischen PWA und native App auch sind - wenn es um Budgetierung und Kosten geht, ist die Trennlinie nicht mehr ganz so scharf.

Aus unserer Erfahrung können wir sagen, dass die Kosten für Budgetposten wie Projektmanagement, Konzept, Design und Tests in etwa gleich hoch sind. Bei den Kosten für die reine Entwicklung sind die PWA etwas im Vorteil, da sie für eine gemeinsame Plattform - also den Browser - entwickelt werden und nicht für unterschiedliche Betriebssysteme wie iOS, Android. Korrekterweise muss man aber auch zugeben, dass die unterschiedlich weit ausgebaute PWA-Unterstützung, Stand Herbst 2018, bei den verschiedenen Browser zusätzlichen Entwicklungsaufwand nach sich ziehen kann und wird.

Nächster Blogpost: Benutzererfahrung (UX) und Tech-Stack von PWA

Die Benutzererfahrung mit Progressive Web Apps und die zum Einsatz kommenden Technologien im Hintergrund sind das Thema im nächsten Teil unserer Serie. Wir freuen uns wie immer auf positive als auch kritische Rückmeldungen und Inputs zu unseren Beiträgen. #jointheconversation

Patrick Delz

Web-Spezialist

Begann im letzten Jahrtausend (1999) mit Webdesign und Webprogramming. Seither hat sich Patrick ununterbochen mit dem Web auseinandergesetzt. Er hat schon mindestens 5 Browser, 3 HTML-Standards und x PHP-Versionen unbeschadet überlebt … 😎

Das könnte dich auch interessieren

24. August 2018

Mit Apps Geld verdienen, wie geht das?

App Monetarisierung - welche verschiedenen App Business Modelle gibt es und was sind ihre Vor- und Nachteile?

Progressive Web Apps 101 im Apps with love Blog
24. Juli 2018

Progressive Web Apps 1/5: eine Alternative zur native mobile App?

PWA sind plattformunabhängig, sie setzen auf moderne Browser-Technologien und bieten neue Chancen für die Web App Entwicklung.

Bay of Fires Tasmanien
06. Juli 2018

Als Remote Worker in Australien und Südostasien

Remote Working Erlebnisse, Fotos & viele App Markt Insights. Vom Camping in Tasmanien, den Reisfeldern in Bali, bis zu Dschungelwanderungen in Laos.

21. Juni 2018

App Indexing: mehr Traffic, Installationen und Nutzung

Durch App-Indexing werden App-Inhalte in mobilen Suchergebnissen von Google angezeigt. Dies führt zu mehr Traffic, Downloads & höherer Nutzung.

Mobile Deep Linking Apps with love Bern
07. Juni 2018

Tiefe Links: Wie können Deep Links helfen das Nutzungserlebnis zu verbessern?

Das Verlinken auf Unterseiten von Apps wird Mobile Deep Linking genannt. Das Nutzungserlebnis wird verbessert und der App Markt damit revolutioniert.

GDPR and Switzerland Awl Blog
24. Mai 2018

Die DSGVO und die Schweiz: ein paar Gedanken zu Hype und Hysterie

Die DSGVO harmonisiert Datenschutzrecht in der EU, aber was ist eigentlich mit der Schweiz? Zeit zum Aufräumen von Missverständnissen & drei Irrtümer.

App Trends Illustration Keyvisual Apps with love Blog
11. Mai 2018

15 APP MARKT UND TECHNOLOGIE TRENDS

Diese App und Tech-Trends werden die Softwarebranche in den nächsten zwei Jahren beschäftigen. Blockchain, KI, 5G, PWAs, VR, AI-Chatbots, AMP, ...

Apps with love an der Droidcon in Turin 2018
26. April 2018

droidcon Turin 2018  - Rückblick & Highlights

Unsere Android Entwickler Yannick und Adel haben die droidcon in Turin besucht. In diesem Blog beschreibt Yannick seine Eindrücke und Highlights.

04. März 2018

HOW TO PIMP YOUR APP – WAS WENN APP USER NICHT WOLLEN?

Dieser Blog Beitrag beschreibt wieso Apps nach dem Download gleich wieder gelöscht, oder kaum genutzt werden und was man dagegen tun kann.

21. Februar 2018

ERFOLGREICH EINE APP ENTWICKELN - SO FUNKTIONIERT'S

Von der ersten Idee bis zum Go-Live einer App ist es oftmals ein steiniger Weg. Hier beschreiben wir unseren agilen App Entwicklungsprozess.

23. Dezember 2017

Pre Launch App Marketing durch User Research und Community Building

Mit “Updraft App Delivery” wurde die Beta-Version der Helsana+ App einfach und ohne die App Stores an mehrere tausend Beta-Tester verteilt.

13. Oktober 2017

Helsana+ Bonusprogramm: Der Weg ist das Plus

Mit dem Ziel ein nachhaltiges Plus im Leben bestehender Kunden zu schaffen, hat Helsana das Helsana+ Bonusprogramm mit Apps with love entwickelt.

carvelo2go blog titelbild
07. September 2017

carvelo2go App – mit 3 Tabs zum nächsten Cargobike

Die carvelo2go App ermöglicht Endkunden ganz einfach via App Cargobikes zu suchen, zu reservieren & Buchungen zu verwalten. Ein App Projektbericht...

User Research Workshop von Apps with love in Murten
13. Juli 2017

User Research in der App-Entwicklung - Unsere Erfahrungen

Die Apps with love User Researcherinnen Julia Klammer, Milena Rutz und Alexandra Tanner blicken auf ein Jahr angewandte Nutzerforschung zurück.

Apps with love Know How für die App Entwicklung
20. Januar 2017

7 entscheidende Tipps für eine erfolgreiche App

Die App-User Experience, der Mehrwert im Kontext, das Projektteam, oder deine Denkweise sind wichtige Erfolgsfaktoren für die App Entwicklung.

App Awards 2016 Apps with love
17. November 2016

BEST OF SWISS APPS: SCHWEIZER APP MARKT ENTWICKELT SICH

Best of Swiss Apps 2016 Awards Review. Zum ersten Mal wurde eine "Best of App Agenturen" Liste aus allen App Awards zwischen 2013 - 2016 erstellt.

21. April 2016

PATROUILLE DES GLACIERS APP - SPITZENSPORT FÜR DIE ENTWICKLER

Die Patrouille des Glaciers ist nicht nur sportlich gesehen ein sehr hartes Rennen, sondern auch für die Entwickler eine Art Marathon.

04. März 2016

App USER ONBOARDING TEIL 2

Die Hälfte der Nutzer öffnet eine App kein zweites Mal. Was kann man dagegen tun? Die Antwort liegt beim allzu oft vergessenen User Onboarding.

18. Februar 2016

EINTAUCHEN IN DIE WELT DES USERS BEFRUCHTET DIE KONZEPTION

Mit der App HORNUSSEN wird eine neue Kommunikations- und Informationsplattform für den EHV geschaffen.

07. Februar 2016

DER ERSTE EINDRUCK ZÄHLT – USER ONBOARDING TEIL 1

Rund die Hälfte der App-User öffnet eine App kein zweites Mal! Was kann man dagegen tun? Die Antwort liegt beim App User Onboarding.

03. Dezember 2015

DESIGN VS. TECHNOLOGY

Sind programmierende Designer die besseren Interaction Designer? Sind gestaltende Programmierer die besseren Interface Programmierer? App Knowhow

22. Juni 2015

APP VERMARKTUNG – MIT SYSTEM ZUM ERFOLG

Wer eine App anbietet, muss diese auch aktiv vermarkten. Wie dies am besten funktioniert und welche Schritte nötig steht in diesem Blogbeitrag.

11. November 2014

IN 7 SCHRITTEN BIS ZUR APP - ENTWICKLUNGSPROZESS

Existierende Denkrichtungen und Ansätze im Projektmanagement sind nicht schlecht. Wir haben jedoch unseren eigenen App Entwicklungsprozess designed.

04. August 2014

DIE WETTER-ALARM APP ERHÄLT EIN NEUES KLEID

Zu Beginn dieses App-Projektes wurde in mehreren Workshops & Kundenbefragungen der Status Quo analysiert. Dann wurde Konzept & App Design entwickelt.

04. Oktober 2013

"BIMANO" DER BOULDER-GUIDE FÜR DIE HOSENTASCHE

Konzipiert mit lokalen Kletterern, ist Bimano der mobile Guide für Bouldering Orte in der Schweiz und Europa.