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.

Beispielhafte Widget-Darstellung in einem Smartphone-Mockup
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.

Kurz zusammengefasst

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Entdecken
Zurück zur Stories-Übersicht
Startet euer Projekt mit uns!
Wir freuen uns auf euch!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
Kontakt
Teaser Bild der Story oder des Projektes
Sennheiser CapTune App für iOS und Android
Sennheiser CapTune App für iOS und Android
Sennheiser CapTune App für iOS und Android
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.

EntdeckenEntdecken
Entdecken
Grafik mit Balkendiagramm und dem Logo von Flutter und zwei Profilbilder
Grafik mit Balkendiagramm und dem Logo von Flutter und zwei Profilbilder
Teaser Bild der Story oder des Projektes
Grafik mit Balkendiagramm und dem Logo von Flutter und zwei Profilbilder
Unser Fazit nach einem Jahr App Entwicklung mit Flutter
Unser Fazit nach einem Jahr App Entwicklung mit Flutter
Unser Fazit nach einem Jahr App Entwicklung mit Flutter
Unser Fazit nach einem Jahr App Entwicklung mit Flutter
Agile Softwareentwicklung

Vor fast einem Jahr haben wir einen Blick auf die Vor- und Nachteile von Flutter geworfen und ziehen nun ein erstes Fazit.

EntdeckenEntdecken
Entdecken

Kontakt

Wir freuen uns auf euch!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für deine Nachricht! Wir werden uns so schnell wie möglich bei dir melden.
Ihre Nachricht konnte nicht gesendet werden. Schreibe uns bitte per Mail (info@projektionisten.de).