Die letzte Technologie die wir uns im Rahmen dieser Blogreihe anschauen sind die hybriden Apps. Falls Sie den vorherigen Artikel zu den Progressive Web Apps nicht gelesen haben, sollten Sie dies unbedingt tun, bevor Sie diesen Artikel lesen. In diesem Artikel wird erklärt was eine Hybrid App ist, was die Vor- und Nachteile einer hybriden App sind und welche Risiken und Abhängigkeiten bei der Entwicklung entstehen. Des Weiteren werden die möglichen Technologien zur Entwicklung einer hybriden App vorgestellt und das entsprechende Know-How am Markt untersucht. Danach werden Entwicklungskosten und -aufwand überprüft und anschließend wird der Artikel mit der Beispiel App abgeschlossen.
Die Blogreihe „Technologien mobiler Anwendungen"
Hier finden Sie die Auflistung der einzelnen Blogartikel, die zur Blogreihe gehören. Diese Agenda wird mit jedem neu veröffentlichten Artikel erweitert.
Hybrid Apps
Überblick: Hybrid Apps
Eine hybride App ist eine Web App, die mit Hilfe von einem Wrapper als „normale“ App verpackt wird. Ähnlich wie eine PWA läuft die hybrid App in einer WebView, also in einem mit einem nativen Wrapper umgebenen Browserfenster. Für die Entwicklung der App kommen daher auch alle gängigen Web-Technologien in Frage. Wir können entsprechend auch eine schon fertige PWA (Progressive Web App) mit kleinen Modifikationen mit einem solchen Wrapper umgeben und müssen die App nicht erneut als "hybride App" neu entwickeln. Hybride Apps können alle nativen Funktionen eines Handys oder anderen mobilen Gerätes nutzen - und in den App-Stores zur Verfügung gestellt werden.
Die Vorteile von hybriden Apps
Ein großer Vorteil ist, wie auch schon bei den vorherigen Technologien dieser Blogreihe, dass ein großer Teil des Codes wiederverwendet werden kann. Der Code von hybriden Apps lässt sich in zwei Teile aufteilen: in die Web App und den Wrapper. Die Web App lässt sich plattformunabhängig wiederverwenden, während der Wrapper für jede Plattform abgeändert werden muss. Aufgrund der hohen Wiederverwendbarkeit des Codes sinken auch die Entwicklungskosten im Vergleich zur nativen Entwicklung oder der Entwicklung mit nicht-nativen Frameworks.
Genauso wie bei den PWAs wird für die Entwicklung einer hybriden App nur ein Team an Web-Entwicklern eingesetzt. Mit hybriden Apps ist es auch möglich, die nativen Features des Zielgerätes zu nutzen. Hierfür können Plugins benötigt werden, die gegebenenfalls durch einen Entwickler mit nativer Erfahrung supplementiert werden.
Der Vorteil, dass eine hybride App auf allen Geräten (also z.B. auf dem Desktop PC mit Windows und jeweils einem iOS und Android-Handy) gleichermaßen funktioniert, kann dafür sorgen, dass das "Look & Feel" ein bisschen vom Gewohnten abweicht. Die betriebssystemunabhängige Nutzung der App überwiegt hier aber deutlich mit ihren Vorteilen.
Risiken und Abhängigkeiten von hybriden Apps
Bei der Entwicklung von hybriden Apps können native Features zu einer Abhängigkeit von Third-Party-Plugins sorgen. Das birgt das Risiko, dass Plugins veralten oder auf anderen Plugins aufbauen, die veralten.
Außerdem bestehen teilweise Abhängigkeiten zwischen den Technologien zur Entwicklung hybrider Apps.
Dadurch, dass wir alle Änderungen aber stets automatisiert überwachen, ist Ihre App aber immer erreichbar und es besteht keine Gefahr, dass Inhalte nur noch selektiv verfügbar sein könnten.
Technologien und Markt Know-how
Hybride Apps schöpfen die Entwicklungsmöglichkeiten von Web-Apps voll aus. Das bedeutet, hier werden die gleichen Technologien verwendet, wie bei einer reinen Web-App oder einer PWA.
Wir nutzen die bekannten Frameworks Ionic und Capacitor zur Entwicklung von hybriden Apps. Diese bieten die Möglichkeit, mit React, Angular oder Vue eine Web-App zu bauen und dabei native Features nutzen, welche von Apache Cordova oder Capacitor verfügbar gemacht werden.
Entwicklungsaufwand und -kosten
Die Entwicklung einer hybriden App lässt sich in zwei Teile teilen. Zum einen in die Entwicklung einer Web-App, welche später in der Web View angezeigt wird und zum anderen in die Verwendung des Wrappers um die Web-App. Die Entwicklung der Web-App benötigt nur Web-Entwickler und lässt sich mit dem Entwicklungsaufwand einer PWA vergleichen. Bei der Verwendung des Wrappers kann es vorkommen, dass für einige Plugins Entwickler mit nativen Know-How eingesetzt werden.
Der Gesamtentwicklungsaufwand liegt dementsprechend etwas höher als bei einer Progressive Web App, aber immer noch deutlich niedriger als bei der nativen Entwicklung, vor allem wenn mehrere Plattformen angestrebt werden. Der Entwicklungsaufwand wäre demnach in etwa vergleichbar mit der Entwicklung mit nicht-nativen Frameworks.
Meine hybride Beispiel-App
Die Beispiel-App wurde anders aufgesetzt als die bisherigen. Als Web-App wurde keine neue Anwendung entwickelt, sondern die zuvor entwickelte PWA verwendet. Diese wurde dann mithilfe des PhoneGap Frameworks zu einer hybriden App verwandelt. Durch die Verwendung der zuvor entwickelten PWA sind die Features, welche allein durch die WebView realisierbar waren, weiterhin erfüllt. Dazu gehört die Logik der Knöpfe und der Uhr an sich. Lediglich die Vibration und die Wiedergabe des nativen Wecker-Tons können von dem Framework übernommen werden.
Der Wecker-Ton ließ sich recht einfach implementieren mit dem Third-Party-Plugin cordova-plugin-nativesounds. Die Vibration war schon vom Browser möglich, führte allerdings bei der Umstellung auf eine hybride App zu Problemen. Da das System nicht mehr eine Instanz des Browsers sieht, sondern davon überzeugt wird, dass eine native App läuft, müssen für die Nutzung der Geräte-Vibration explizite Berechtigungen im, in diesem Beispiel nativen Android-Code, der um die WebView läuft, erteilt werden. Durch die eher mager beschriebene Dokumentation und durch fehlende Dokumentation über das Implementieren einer fertigen PWA mit PhoneGap, dauerte die Entdeckung der Lösung relativ lange.
Hier nochmal der Erfüllungsgrad der einzelnen Features in einer Tabelle.
++: Feature ist vollständig umgesetzt
+-: Feature ist nur teilweise umgesetzt
--: Feature ist gar nicht umgesetzt
| Anforderung | Erfüllt | Anmerkung |
|---|---|---|
| Uhr | ++ | |
| Runde Progressbar | ++ | |
| Picker für die Zeit | ++ | |
| Play-Button | ++ | |
| Reset-Button | ++ | |
| Vibration | ++ | explizite Permissions notwendig |
| Wecker-Ton | ++ | Third-Party-Plugin |
Wenn Sie die nächsten Artikel der Blogreihe "Technologien mobiler Anwendungen" nicht verpassen wollen, dann folgen Sie newcubator auf den Social Media Kanälen und schauen Sie regelmäßig auf unserer Blogseite vorbei. Im nächsten Artikel vergleichen wir alle bisher vorgestellten Technologien auf technischer Ebene miteinander.
Sie haben eine Produktidee für eine App und sind sich unsicher, welche Technologie für Sie die Beste ist? Dann kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.
