Native Features für Web-Apps. Wie Android Widgets mit Cordova umgesetzt werden.

Unser Experte für Agile Softwareentwicklung Patrick erklärt, wie die Vorteile nativer Apps auch in Web Apps umgesetzt werden können.

Patrick, du hast dich mit dem Erstellen von Android Widgets mit Cordova beschäftigt. Was sind Android Widgets und warum ist Cordova in diesem Kontext gesondert zu betrachten?

Zunächst ist zu sagen, dass es verschiedene Typen von Apps gibt. Native Apps etwa werden speziell für ein Betriebssystem entwickelt. Sie müssen das vom Hersteller zur Verfügung gestellte SDK, also die Entwicklungsschnittstelle des Systems, ansprechen. Über dieses SDK hat die App dann aber auch direkten Zugriff auf native Funktionen wie beispielsweise Kamera oder Bewegungssensoren. Web Apps sind betriebssystemunabhängig und werden über den Webbrowser ausgeführt. Sie sind im Grunde Webseiten, die für die mobile Nutzung optimiert sind und die Optik einer nativen App nachbilden. Hybride Apps sind eine Mischung der beiden eben genannten App-Typen. Sie werden als Web Apps entwickelt, aber installiert wie native Apps.
Eine Funktionalität nativer Apps sind sogenannte (Android-) Widgets. Hierbei handelt es sich um Tools, welche es ermöglichen den Homescreen eines Smartphones zu personalisieren (z.B. an den jeweiligen Standort angepasste Schnellübersicht über das Wetter, Verkehrsmeldungen oder Nachrichten). Sie holen einen Teil der Funktionalität einer App als Schnellzugriff (bzw. App Launcher) auf den Homescreen. Um diese oder andere Möglichkeiten nativer Apps auch bei Web Apps nutzen zu können, kann ein Framework wie Apache Cordova entsprechende Schnittstellen bieten. Mit dessen Hilfe können Webanwendungen als native App verpackt und aus dem Web-Kontext ein Zugriff auf native Features erreicht werden. Diese sogenannten Cordova Plugins bilden also die Brücken zwischen nativem System und Web App und enthalten nativen Code für eine oder mehrere Plattformen (iOS, Android, Electron). Zusätzlich zu der nativen Funktionalität enthält das Plugin eine JavaScript Schnittstelle die es ermöglicht, dass der native Code (z.B. der eines Widgets) und der Webcode miteinander kommunizieren können.

Welche Herausforderungen begegnen dir bei der Entwicklung der Android Widgets und der dazugehörigen Plugins für Web Apps?

Zur Konfiguration des nativen Codes (Farben, Einstellungen etc.) als auch der Ereignisse (Weiterleitung in Web App, Verarbeiten von Nutzerinteraktionen) muss das zu erstellende Plugin entsprechende Schnittstellen liefern. Die meisten Cordova Plugins sind quelloffen und möglichst generalisiert entwickelt, damit viele Entwickler sie für ihre Apps verwenden können. Für den Zugriff auf biometrische Sicherheitsfunktionen des Telefons, die Kamera oder die Ortung des Nutzers ist dies auch ein sinnvoller Weg, da wenige individuelle Einstellungen abverlangt werden und nur die Benutzung dieser Funktionen aus dem Web Code ermöglicht werden muss.
Die Funktionalität und insbesondere das Design eines nativen Homescreen Widgets erfordern i.d.R. eine individuelle Gestaltung, weshalb kein generalisiertes Plugin erstellt, genutzt und wiederverwendet werden kann. Zudem kann ein Android Widget beispielsweise nicht einfach auf ein iOS System übertragen werden. Auch hierfür bedarf es der Entwicklung einer neuen, individuellen Lösung. Um eine solche Funktionalität in seiner Hybrid App anzubieten, muss also eigener nativer Code für jede gewünschte Plattform entwickelt, und ein eigenes Plugin geschrieben werden, welcher den nativen und den Web Code miteinander verbindet.

Was bedeuten deine Erfahrungen aus diesem Prozess für das Entwickeln von Hybriden Web Apps?

Oft werden Hybride Apps mit Cordova, Capacitor, Xamarian etc. als eingeschränkter angesehen weil sie „nur“ eine verpackte Webseite auf dem Smartphone darstellen, welche die „echte” Integration mit dem nativen System vermissen lassen. Eigentlich ist eine Einschränkung beim Design einer solchen App aber nicht notwendig. Sofern die Bereitschaft vorhanden ist, individuelle Plugins zu entwickeln, können in einer Hybrid App nicht nur die stylistischen Freiheiten des Webs genutzt, sondern gleichzeitig auch praktisch alle plattformspezifischen, nativen Funktionen ausgenutzt werden. Eigener Plugin Code bietet also auch Eröffnungen um über den Rahmen einer Web App hinauszuwachsen.

Zwei Android Widgets untereinander (umgesetzt mit Capacitor und Cordova v.o.n.u)
Wie sieht die Umsetzung mit Capacitor aus?

Die beiden abgebildeten Widgets wurden mit unterschiedlichen Frameworks entwickelt: Das obere mit Capacitor und das untere mit Cordova. Der Prozess der Integration von nativem Code ist zwar unterschiedlich, eine Umsetzung ist aber natürlich mit beiden möglich. Zukünftig werden wir unsere Hybriden Apps vorzugsweise mit Capacitor erstellen, da es durch regere Community Entwicklung zukunftssicherer wirkt. Individueller nativer Code, wie ein Homescreen Widget, ist mit Capacitor einfacher in ein Projekt zu integrieren und leichter zu beeinflussen als bei Cordova. Dem Entwickler wird dort ein bequemerer Zugriff auf diesen Code ermöglicht. Ein Plugin als Schnittstelle von nativem Code zu JavaScript ist aber auch hier notwendig.

Wie lautet dein Fazit?

Auch wenn es für Android Widgets noch kein allgemeingültiges Plugin gibt, bedeutet dies keinerlei Einschränkungen für das angestrebte Endergebnis. Durch Plugins in den Hybrid Frameworks können auch für Web Apps alle Features, die native Apps bieten, ermöglicht werden. Je nachdem welche Funktionalität der Web App aber nativ nachgebaut werden soll, ist die Schätzung des zu erwartenden Aufwands nicht immer einfach.

Entdecken
Zurück zur Stories-Übersicht
Interessiert?
Wir freuen uns auf Sie!
Ihr Ansprechpartner
Henrik Johannsen
Kontakt
Sennheiser CapTune App für iOS und Android
Agile Softwareentwicklung

In Zusammenarbeit mit Sennheiser wurde die CapTune App, ein Musik-Player der speziell auf die Bedürfnisse der Sennheiser-Kunden angepasst ist, weiterentwickelt.

Entdecken
1KLANG + DSW21 Website Launch
Digitale Mobilität

Kurz nach Neujahr konnten wir mit der dsw21-Webseite www.bus-und-bahn.de live gehen und wir freuen uns sehr über dieses gelungene Ergebnis und die tolle Zusammenarbeit. Die ganze Story auf 1klang.mobi:

Entdecken
Kontakt

Wir freuen uns auf Sie!

Ihr Ansprechpartner
Henrik Johannsen
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).