Native Apps mit HTML5 und Apache Cordova entwickeln

Erstellt: 15.05.2017
von: Roberto De Simone

Apps mit Apache Cordova und Web Technologien zu entwickeln führt zu geringeren Entwicklungs- und Wartungskosten. Mit einer einzigen Quellcode Version ist es möglich Apps für Android, iOS und Windows zu erstellen.

picture showing symbols for developing native apps with HTML5

[Die erste Version dieses Blogs wurde im März 2014 erstellt. Die vorliegende Version wurde komplett überarbeitet]

Apache Cordova ist das Schlüsselprodukt für die Entwicklung von Apps mit HTML5

Das Schlüsselprodukt für die Entwicklung von nativen Apps mit Web Technologien ist Apache Cordova(https://cordova.apache.org/). Ebenso bekannt ist [PhoneGap(https://www.phonegap.com/). Der Zusammenhang zwischen Cordova und PhoneGap sorgt immer wieder für Verwirrung: PhoneGap ist ein Fork von Cordova und die beiden Produkte sind heute nahezu identisch. Wie in diesem PhoneGap Blog angekündigt wurde, ist aber damit zu rechnen, dass in Zukunft PhoneGap mit zusätzlicher Funktionalität erweitert wird.

Wie funktioniert Apache Cordova

Cordova erstellt eine native App, welche einen sogenannten WebView enthält - ganz einfach gesagt: ein Browser wird in eine App eingepackt. Der WebView führt die Web App aus, welche mit HTML5 entwickelt wird. Zusätzlich besitzt Cordova eine Sammlung von Plugins, die mit einer Schnittstelle zu JavaScript den Zugriff auf betriebssystem spezifische Funktionen (APIs) erlaubt. Die native App besteht somit aus dem Code für die Integration des WebViews (mit allen Schnittstellen zu JavaScript), dem nativen Code für die Plugins sowie - als Assets - allen für die Web App benötigten Dateien (HTML, CSS , JavaScript,…). Die Kombination aus nativem Code und Web Technologien gibt Cordova Apps auch den Namen “Hybrid Apps”. Das Zusammenfügen all dieser Komponenten geschieht mit Hilfe der Cordova CLI.

Frameworks zur Erstellung von Cordova Apps

Die Web App, welche im WebView ausgeführt wird, erfolgt mit Hilfe von JavaScript und einem User Interface (UI) Framework. Bei der Auswahl dieser Frameworks gilt es, einige Entscheidungen zu treffen: Gibt es Präferenzen für ein JavaScript Framework (Angular, React, Vue,…)? Wie soll die App aussehen? Soll diese wie eine native App aussehen? Steht das Corporate Identity der Firma im Vordergrund? Oder soll es eine Kombination von beidem sein? Aus meiner Erfahrung möchten Entwickler möglichst viele native Komponenten verwenden.

Es existieren zahlreiche UI Frameworks im Markt. Meiner Meinung nach sollten folgende hervorgehoben werden:

  • Ionic: dies ist vermutlich zur Zeit das populärste Framework für die Entwicklung von Cordova Apps. Ionic basiert auf Angular. Nebst den schönen UI-Komponenten bietet Ionic auch zahlreiche Funktionen, um die Entwicklung von Cordova Apps zu erleichtern. Mit Ionic Native können Plugins einfach integriert werden.
  • Framework 7: dieses Framework ist ein VanillaJS (pures JavaScript) Projekt und wurde nicht speziell für Cordova entwickelt. Seit es eine Vue Integration erhalten hat, ist dessen Popularität stark gestiegen. Die UI-Komponenten von Framework 7 sind pixel-perfekt und die Ausführungsgeschwindigkeit ist ausgezeichnet.
  • Onsen UI: dieses Framework basiert auf einem Konzept von Web Komponenten und unterstützt verschiedenste Frameworks (AngularJS, Angular, React und Vue).

Werkzeuge für die Cordova App Erstellung

Die nativen Entwicklungswerkzeuge

Wenn es um die App-Erstellung geht, sind die nativen Werkzeuge (Android Studio, xCode und Visual Studio) nach wie vor die erste Wahl, da diese die grösstmögliche Flexibilität bieten. Es ist aber darauf hinzuweisen, dass der Lernaufwand für die Verwendung der nativen Entwicklungswerkzeuge und der Unterhalt der verschiedensten abhängigen Komponenten nicht zu unterschätzen ist. Microsoft versucht das Problem der Abhängigkeiten mit den TACO Tools in den Griff zu bekommen. TACO Tools installieren und verwenden alle notwendigen Komponenten, die zur Erstellung von Cordova Apps benötigt werden. Mit sogenannten Validated Kits wird sichergestellt, dass die einzelnen Komponenten aufeinander abgestimmt sind. Gerade für das Enterprise Entwicklungen ist dies sehr interessant!

Cloud-basierte Lösungen

Bei Cloud-basierten Lösungen ist die Installation der Entwicklungswerkzeuge nicht erforderlich. Wie es der Name bereits sagt, erfolgt die Bildung der App Pakete in der Cloud. Zu erwähnen sind PhoneGap Build und die Monaca Cloud IDE. Cloud Lösungen haben den Nachteil, dass nicht alle Plugins verwendet werden können, und dass nur beschränkte Möglichkeiten vorhanden sind um den Bildprozess anzupassen.

Microsoft Visual Studio

Microsoft Visual Studio unterstützt die Erstellung von Cordova Apps prominent - in den Installationseinstellungen von Visual Studio kann die Erstellung von Cordova Apps gewählt werden. Dabei werden mit Hilfe der bereits erwähnten TACO Tools alle notwendigen Komponenten lokal installiert. Für die Entwicklung von iOS Apps wird ein Mac mit einem Remote Agent benötigt. Es ist sogar möglich MacInCloud zu verwenden. Alle notwendigen Entwicklungsarbeiten können somit in Visual Studio erfolgen. Zusätzlich besitzt Visual Studio Vorlagen für Ionic und Onsen UI.

Testen und Debuggen von Cordova Apps

Wenn es darum geht, eine Cordova App zu testen, sind Emulatoren bzw. Simulatoren (iOS) hilfreich. Seit Android Studio 2.2 funktionieren nun auch die Android Emulatoren effizient, wenn der PC/Mac Intel HAXM (Hardware Accelerated Execution Manager) unterstützt. Lösungen von Drittanbietern sind nun nicht mehr erforderlich. Besser als Emulatoren eignet sich aber nach wie vor ein Set von verschiedenen mobilen Geräten.

Die Problematik des WebViews einer Cordova App

Der WebView ist Teil des Betriebssystems

Wie erwähnt, wird die Web App im WebView ausgeführt. Mit Ausnahme von Crosswalk für Android (dazu später mehr) ist der WebView mit dem Betriebssystem verbunden (und nicht mit der App). Ein Entwickler kann somit nicht entscheiden, welchen WebView die App verwenden soll. Es muss somit sichergestellt werden, dass die App auf den WebViews korrekt läuft, welche ein Benutzer installiert haben könnte.

Android spezifische Eigenschaften des WebViews

Seit Android 5.0 wird der WebView über den Google Play Store aktualisiert. Dies bedeutet, dass Geräte, welche Android 5.0 oder grösser verwenden, die neueste Version des auf Chromium basierenden WebViews besitzen, sofern der Benutzer diesen auch aktualisiert. Man muss aber im Hinterkopf behalten, dass auch ein neuerer WebView das Verhalten der App ändern kann.

Geräte mit Android 4.1, 4.2 und 4.3 besitzen immer noch den alten WebView, welcher auf dem alten WebKit Standardbrowser basiert. Dessen Funktionalität ist nicht mehr zeitgemäss. Android 4.4 besitzt entweder Chrome 32 oder 33. All diese Android Versionen haben gemeinsam, dass der WebView nicht aktualisiert werden kann. Um diese Android Versionen zu unterstützen, empfiehlt sich die Verwendung von Crosswalk Projekt. Crosswalk bündelt eine moderne Version von Chromium (welche der Entwickler wählen kann) mit der App. Der WebView wird somit Bestandteil der App. Grundsätzlich ist die Verknüpfung des WebViews mit der App eine sehr begrüssungswerte Lösung, da nun der Entwickler die Kontrolle darüber besitzt, für welchen WebView die App optimiert werden muss. Leider hat Crosswalk einen nicht unerheblichen Nachteil: die Grösse einer App ist über 30MB, wenn für arm und x86 unterschiedliche APKs erstellt werden. Wird ein einzelnes APK für beide Prozessorarchtitekturen erstellt, verdoppelt sich die App Grösse. Es existiert auch Crosswalk Light, welches Crosswalk mit dem ersten App-Start lädt. Allerdings rate ich von dieser Lösung ab, weil dieser Vorgang nicht vollständig vom Entwickler kontrolliert werden kann.

** meine Empfehlung ist, auf Crosswalk zugunsten eines schlanken App Paketes zu verzichten und nur noch Android 4.4 oder höher zu unterstützen (sofern dies das UI Framework erlaubt). Noch besser ist es, die App nur noch für Android 5.0 oder höher lauffähig zu gestalten. Auch letzteres ist meiner Meinung nach heute vertretbar.**

iOS spezifische Eigenschaften des WebViews

Seit iOS 8 enthält das Betriebssystem zwei verschiedene WebViews: den alten UIWebView und den modernen WKWebView. Letzterer bietet höhere Ausführungsgeschwindigkeiten und einen geringeren Speicherverbrauch. Allerdings verwenden auch heute noch die meisten Cordova Apps den alten UIWebView, da es nach wie vor offene Punkte in Zusammenhang mit dem WKWebView gibt.

Ein zusätzlicher Vorteil des WKWebViews ist die Unterstützung von Scroll Events. Dies ist wichtig, wenn in Zusammenhang mit langen Listen das native Scrolling verwendet werden soll (mehr dazu später). Mit dem UIWebView wird eine JavaScript basierende Lösung benötigt.

Andere Herausforderungen bei der Entwicklung von Cordova Apps

Abhängigkeiten zwischen den Komponenten

Alle Software Komponenten müssen aufeinander abgestimmt sein: node, cordova, cordova-platforms (Android, iOS, Windows), build tools (Android Studio, xCode, Visual Studio), plugins, UI frameworks… Nicht alle Versionen der einzelnen Komponenten erlauben ein Zusammenspiel. Dies ist vermutlich die grösste Herausforderung bei der Entwicklung von Cordova Apps. Es ist somit wichtig, einen vollständig automatisierten Bildungsprozess zu besitzen, damit jederzeit das Projekt einfach neu aufgesetzt werden kann, wenn eine Aktualisierung der Softwarekomponenten erforderlich ist. Alle Einstellungen für ein Cordova Projekt sollten in config.xml erfolgen. Wenn nicht unterstützte Einstellungen erforderlich sind, sollten Hooks erstellt werden. Mehr dazu in der zugehörigen Cordova Dokumentation.

Forms und Keyboard Handling

Bei der Entwicklung von Forms sollte das Keyboard Plugin verwendet werden um die Inputs an die korrekte Stelle zu scrollen, damit diese nicht von der Tastatur überdeckt werden. Das Keyboard Plugin stellt Events zur Verfügung, mit welchen das Öffnen und Schliessen der Tastatur festgestellt werden kann.

Ein anderes Problem in Zusammenhang mit Forms sind fehlende Input-Hilfen für die Form Controls (Pickers). Hierzu lohnt es sich, einen Blick auf Mobiscroll zu werfen.

Grosse Listen

Die einfachste und schnellste Art um in Listen zu scrollen ist die Verwendung des nativen Scrollings. Wie bereits erwähnt, muss dazu für iOS der WKWebView verwendet werden. Auch wenn das native Scrolling einige hundert Einträge handhaben kann, braucht es für wirklich grosse Listen andere Konzepte wie z.B. Paginierung oder auf JavaScript basierende Lösungen. Ein Beispiel dazu ist InfiniteScroll von Ionic.

Plugins

Für Funktionalitäten, welche nicht mit Webtechnologien abgebildet werden können, braucht es die bereits mehrfach erwähnten Plugins. Heute gibt es fast für alle populären Problemstellungen ein Plugin. Leider gibt es immer wieder Situationen, in welchen eine bestimmte Funktionalität nicht unterstützt wird oder ein Plugin fehlerhaft arbeitet. In diesem Fall führt kein Weg daran vorbei, ein existierendes Plugin zu modifizieren oder ein neues Plugin zu erstellen. Dafür braucht es dann aber Kenntnisse in der Programmierung mit den nativen APIs.

Cordova bringt grosse Produktivitätsgewinne für die App Entwicklung

Wenn man die Cordova Entwicklung im Griff hat, dann ist der Produktivitätsgewinn für die App Entwicklung enorm. Eine einzige Codebasis zu unterhalten und daraus Apps für alle Plattformen zu erstellen, ist cool!

Wenn die App gut designt ist, kann dieselbe Codebasis auch für eine Web App verwendet werden, welche über einen Webserver verteilt wird.

Frameworks wie Ionic bieten auch Support für Progressive Web Apps (PWA) an.

Wie kann eine Cordova App mit einer nativ entwickelten App verglichen werden

Die Verwendung der nativen APIs führt immer zur bestmöglichen Produktqualität. Es stellt sich aber die Frage, ob man den doppelten, dreifachen oder sogar noch mehr Aufwand erbringen möchte, wenn am Ende der Benutzer die Unterschiede zwischen nativen APIs und Web Technologien doch nicht erkennen kann?

An dieser Stelle sei auch erwähnt, dass verschiedenste Tools versuchen, die nativen APIs mit einer Codebasis zu verwenden und daraus Apps für Android und iOS zu erstellen. Erwähnt seien dabei React Native, NativeScript, Xamarin Forms und Flutter. Das Resultat einer mit diesen Werkzeugen erstellten App ist sehr gut. Es wird aber noch eine Weile dauern, bis diese Tools so weit ausgereift sind, dass ähnliche Produktivitätsgewinne erreicht werden können wie dies mit Cordova der Fall ist.

Schlussfolgerung

Neben dem Produktivitätsgewinn: UI Frameworks, Web Technologien und Plugins entwickeln sich immer weiter und es dürfte somit in der Zukunft für den Benutzer noch schwieriger werden, die Unterschiede zwischen nativen APIs und Web Technologien zu erkennen.