18.09.2018, Unsere Apps

Unsere erste PWA ist live!

Wir haben eine unserer iOS Apps als PWA nachgebaut und die beiden Apps einem Vergleich unterzogen. Erfahren Sie die Ergebnisse in diesem Artikel.

 

In unserem letzten Blogpost Progressive Web Apps – mehr als nur ein Hype? haben wir ausführlich über PWAs sowie über ihre Vor- und Nachteile gegenüber klassischen Webseiten und nativen Apps berichtet.

Kurz zusammengefasst: PWAs bieten Möglichkeiten, die bisher nativen Apps vorbehalten waren. Betreffend Look & Feel kommen sie nativen Apps sehr nah und übertrumpfen herkömmliche (Mobile) Websites betreffend Performance. Ausserdem erzielen sie tendenziell mehr Reichweite und müssen nur für eine Plattform entwickelt werden. Sie haben aber auch Nachteile: (Noch) kein voller Support auf iOS, der Zugriff auf Hardware-Features ist eingeschränkt und viele Toolkits & SDKs können nur in nativen Apps eingebaut werden.

Wir haben jetzt eine unserer nativen iOS Apps – die Stations App – als PWA nachgebaut. In diesem Post unterziehen wir die beiden Apps einem 1:1 Vergleich.

 

Welchen Anforderungen musste die Stations PWA genügen?

 

Die Stations iOS App ist sehr beliebt bei Pendlern und allen regelmässigen ÖV-Nutzern in der Schweiz, die sich einfach und rasch über die nächsten Abfahrtszeiten von Bahn, Tram, Bus etc., sowie über Gleisänderungen, Verspätungen und Ausfälle informieren möchten.

Entscheidend also für die Anwender: Rasche Ladezeiten und eine laufende Aktualisierung der Daten. Auch ist die Usability der iOS App intuitiv gehalten: die nächsten Abfahrtszeiten werden standortabhängig angezeigt. Es können zudem Favoriten angelegt und gezielt nach Orten und späteren Zeiten gesucht werden.

Wie also schneidet nun die PWA im Vergleich zur nativen iOS App ab? Wir haben die beiden Apps anhand verschiedener Kriterien einem Vergleich unterzogen.

 

Kriterium 1: App Installation

 

Googelt man Stations App, so wird die App in der Browsersuche angezeigt. Mit einem Klick ist man im App Store und kann da die App mit einem weiteren Klick installieren.

Da die PWA neu ist, muss man sie zurzeit noch via Linkeingabe – stationsapp.ch – finden (was sich mit der Nutzung bzw. SEO über die Zeit jedoch ändern wird).

Bei Android wird der User nach dem Klick auf den Link gefragt, ob er die PWA installieren möchte. Bei iOS fehlt ein solcher Hinweis. Er kann die App via Share-Options dem Bildschirm hinzufügen und die Browser-Navigation verschwindet.

FAZIT: Beide Apps sind mit etwa dem gleichen Zeitaufwand installiert. Der «Umweg» über den App Store für die native App mag dabei für einige eine mentale Hürde sein. Eine PWA hingegen kann man über den Browser-Link einfach mal ausprobieren. Nachteilig bei Apple-Geräten: der Anwender kommt eventuell gar nicht auf die Idee, dass es sich um eine PWA handelt, sofern die App nicht selber darauf hinweist.

 

Kriterium 2: Usability & Performance

 

Vom Look her sind die beiden Apps nicht zu unterscheiden. Sobald die App dem Homescreen zugefügt wird, verschwindet mit der Browser-Navigation das letzte Web-Indiz. Sprich: die Apps sind optisch gesehen identische Zwillinge.

 

PWA
native iOS App

 

Die Ladezeiten der PWA stehen jenen der iOS App in nichts nach, da es eine Single-Page-Applikation ist, die den Content via Webservices lädt.

Auch das Scroll- und Klickverhalten sind nahezu identisch, ausser kleinen Details in der Haptik: in der iOS App ist es möglich, bei Antippen einer Funktion eine Vibration einzubauen, z.B. in der Stations App bei der Verbindungs-Detailansicht. Solche Spielereien sind zurzeit in PWAs nicht möglich.

Nachteilig bei der PWA: die Zustimmung für die GPS-Nutzung muss täglich einmal gegeben werden, während bei der nativen App ein einmaliger Akzept genügt (und dieser in den Geräteeinstellungen jederzeit geändert werden kann). Auch startet die PWA auf iOS immer neu, wenn man mal kurz rausgeht, die zuletzt gesuchte Verbindung ist dann weg. Hierzu braucht es in einem nächsten Schritt eine Erweiterung im Code als Workaround.

Anmerkung: Verzichtet haben wir auf eine Desktop- oder Tablet-spezifische Designoptimierung (wie das die native App für Tablets bietet), wobei dies natürlich problemlos möglich wäre.

FAZIT: Betreffend Performance sowie wie auch von der Usability her sind die beiden Apps – mit Ausnahme einiger weniger Abstriche bei der PWA – nahezu identisch.

 

Kriterium 3: Funktionsumfang

 

Die Funktionen der iOS App konnten bei der PWA problemlos umgesetzt werden:

  • GPS-basierte Anzeige der Haltestellen in der Umgebung
  • Anzeige nächster ÖV-Abfahrtszeiten als Table-View
  • Anzeige Verspätungen, Gleisänderungen, Zugausfälle
  • Suche nach Ort
  • Favoriten anlegen
  • Einbindung von Live Daten für SBB und viele Regionalbetriebe
  • Caching (der Übersichtsseiten)

Die Stations App ist allerdings betreffend Funktionalität eine eher «einfache» App, die keine von Apple bei PWAs nicht unterstützten Funktionen wie Push anbietet. Auch braucht die App keine Hardware-Features wie Bluetooth oder NFC und es sind keine Toolkits und SDK’s wie AR, ML, Scanning o.ä. im Einsatz.

Anmerkung: Aus Zeitgründen haben wir in der PWA noch nicht den vollen Funktionsumfang der nativen App umgesetzt und das Layout ist noch nicht für Desktop, Tablets optimiert. Verzichten mussten wir ebenso auf Funktionen, welche mit PWAs nicht möglich sind, wie z.B. 3D-Touch, Multitasking auf iPad und eine Apple Watch Version.

FAZIT: Bei dieser betreffend Funktionsumfang eher einfach gehaltenen App sind wir an keine funktionalen Grenzen gestossen. Generell gilt, dass der geplante Funktionsumfang ein wichtiges Entscheidungskriterium für oder gegen den Einsatz einer PWA ist.

 

Kriterium 4: Entwicklungsaufwand

 

Für Interessierte ein kurzer Exkurs über die eingesetzten Technologien:

  • Für die Entwicklung haben wir uns – nach eingehender Evaluation verschiedener Frameworks –  für «React» entschieden. Der Vorteil war, dass das Framework bereits einiges bietet, wie z.B. einen Service Worker fürs Caching. Allerdings mussten wir auch einige eher «primitiv» gelöste Funktionen, wie z.B. die History, sprich das Zurücknavigieren, als eigenen Stack mit HTML5/CSS/Javascript hinzu bauen. Dabei haben wir natürlich auf eine gute Wiederverwendbarkeit der entwickelten Komponenten geachtet.
  • Für die Datenspeicherung haben wir WebSQL integriert und einen JSON-Export der DB beim ersten Laden implementiert, da bereits vorhandene Daten nicht initial in einem WebSQL-Storage abgelegt werden können. Künftig werden wir WebSQL durch eine andere Technologie ersetzen, um mehr Browser zu unterstützen.
  • Wie bei allen Webentwicklungen waren dann noch einige CSS-Tricks notwendig, damit die App auf Safari und Chrome-Browsern, allen Plattformen und Screen-Grössen einwandfrei dargestellt wird (wobei die App layoutmässig für Tablets und Desktops nicht optimiert wurde). Anmerkung: Die App läuft noch nicht auf Microsoft Edge, Internet Explorer und Firefox, da sie WebSQL verwendet (hierzu sind zusätzliche Anpassungen notwendig).

Da die PWA nur für eine Plattform entwickelt ist, ist der Entwicklungsaufwand klar tiefer als bei Apps, die für beide Plattformen – iOS und Android – in der jeweiligen nativen Sprache entwickelt werden.

Gemäss unseren gemachten Erfahrungen sind die Einsparungen jedoch nicht genau 50%, denn sie hängen davon ab, wieviel an plattformspezifischer UX die App enthalten soll und wieviele Browser- und OS-Versionen unterstützt werden sollen.

Auch der Aufwand, der betrieben wird, um das Layout auf verschiedene Screengrössen auszurichten, spielt dabei natürlich eine Rolle. Eine PWA, die auch für Desktop oder Tablets optimiert wird, braucht mehr Zeit, als wenn sie primär für Smartphones bestimmt sein soll. Andererseits kann dadurch aber auch Aufwand für die Konzeption einer separaten konventionellen Webseite eingespart werden.

FAZIT: Die Einsparungen in der Entwicklung und Maintenance einer PWA im Vergleich zu zwei nativen Apps sind sicher ein ausschlaggebendes Argument, auf PWAs zu setzen, sofern die funktionalen Anforderungen dies zulassen.

 

Am besten laden Sie die beiden Apps gleich selbst und stellen den Vergleich an! (Anmerkung: unterstützte Browser bei der PWA: Safari und Chrome)

 

App Store

Weiterempfehlen: