Native App, hybride App, Web-App und Cross-Plattform-App im Vergleich

Vor der Entwicklung einer mobilen App für Smartphones oder Tablets stellt sich die Frage, welche Art von App man aufsetzen sollte. Zur Auswahl stehen native Apps, hybride Apps, Web-Apps oder Cross-Plattform-Apps. Alle diese Apps unterscheiden sich in grundlegenden Punkten voneinander.

Man sollte sich also zunächst mit den einzelnen App-Typen vertraut machen, um herauszufinden, welche App die passenden Funktionen für das eigene Projekt liefert.

Erfüllt eine App nicht die Erwartungen des Nutzers, besteht die Gefahr, dass er sie umgehend wieder vom Gerät löscht. Umso wichtiger ist es, den optimalen App-Typ vor der Entwicklung auszuwählen.

Vorteile von nativen Apps:

- am schnellsten und am zuverlässigsten von allen App-Typen

- optimale Anpassungsmöglichkeit an Design und Bedien-Elemente der jeweiligen Plattform

- uneingeschränkter Hardware-Zugriff etwa auf Mikrofon, Kamera und Geolocation (Standort-Lokalisierung) über GPS

- uneingeschränkte Zugriffsmöglichkeit auf die Kontaktdaten

- uneingeschränkter Zugriff auf das Betriebssystem

- Offline-Modus möglich; sehr hilfreich, wenn der Nutzer keine oder nur eine schwache Internetverbindung hat

- Vertrieb über App-Shops möglich

- Teilen-Funktion über Social Media, E-Mail oder Messenger-Dienste ist wesentlich leichter aus einer nativen App heraus als über einen Browser

Nachteile von nativen Apps:

- für jede Plattform muss eine eigene App programmiert werden, da sich der Code je nach Plattform unterscheidet; das erhöht die Kosten, wenn man Apps für mehrere Plattformen auf den Markt bringen möchte

- auch die Benutzeroberfläche muss für jede Plattform separat entwickelt werden

- mit der Code-Basis der nativen App kann keine Web-Version für den Browser erstellt werden

Web-Apps

Anders als native Apps müssen Web-Apps nicht auf dem mobilen Endgerät des Nutzers installiert werden. Der Programm-Code der App liegt auf einem externen Server und wird über den auf Smartphones oder Tablets installierten Browser ausgeführt. Die Web-App muss nur einmal programmiert werden und ist mit allen grossen Plattformen (Android, iOS und Windows) kompatibel.

Mobile Webseiten und responsives Design

Die erste Generation von Web-Apps sind unter der Bezeichnung «mobile Webseiten» bekannt. Wer etwas auf sich hielt, hat neben der «normalen» Webseite für PC oder MAC auch noch eine Webseite für mobile Geräte entwickeln lassen. Man erkannte diese Seiten an dem «m.» (anstatt «www.») vor der Domain. Eine mobile Website ist eine von der Desktop-Version separate Website mit einem eigenen Template.

Heute werden so gut wie keine mobilen Webseiten mehr gebaut. Statt dessen setzt man verstärkt auf das sogenannte responsive Design. Hier wird nur noch eine Website programmiert, die sowohl auf dem Desktop optimal angezeigt wird als auch auf mobilen Endgeräten. Die Anpassung an das jeweilige Gerät erfolgt automatisch.

Ausser dem Design können weder mobile Webseiten noch solche mit responsivem Webdesign mehr leisten als eine Webseite auf dem Desktop. Insbesondere sind sie für den Offline-Betrieb ungeeignet.

Progressive Web-Apps

Die zweite Generation von Web-Apps – auch HTML5-Apps oder progressive Web-Apps (PWA) genannt – kommen den nativen Apps einen deutlichen Schritt näher. Sie können auch Push-Nachrichten verschicken und sind vor allem dank der Verwendung sogenannter Service Worker Offline-fähig.

Zwar wird auch die progressive Web-App im Browser ausgegeben. Trotzdem kann bei einer solchen App ein eigenes Lesezeichen auf dem Startbildschirm des mobilen Endgerätes fixiert werden, was einem App-Icon gleichkommt.

Ausserdem zeichnen sich progressive Web-Apps dadurch aus, dass ein Vollbild-Modus in den Code eingeführt werden kann, wodurch die browsertypischen Elemente verschwinden, wenn die App über das Icon vom Homescreen aufgerufen wird. Damit dieser Vollbild-Modus auch beim Klicken auf interne Links erhalten bleibt, muss man noch zusätzlichen Code einfügen.

Progressive Web-Apps werden mit Hilfe derselben Programmiersprachen entwickelt, die man auch für eine Website verwendet: HTML5, CSS3 und JavaScript.

Vorteile von Web-Apps:

- plattform-unabhängig, also insbesondere auf iOS, Android und Windows lauffähig

- kostengünstig und schnell umsetzbar

- keine Installation nötig und damit keine Belastung für den Geräte-Speicherplatz

- Vertrieb über App-Shops möglich aber kein Muss

- durch Abrufen über einen Browser sind Web-Apps grundsätzlich unabhängig von App-Shops

- Aktualisierungen erfolgen zentral, also kein erneutes Einreichen im App-Shop nötig und damit auch keine Installation von Updates auf dem Gerät des Nutzers erforderlich

Nachteile von Web-Apps:

- wesentlich schlechtere Performance verglichen mit nativen Apps: verzögerte Reaktionszeiten (z.B. ruckeln, hängenbleiben) insbesondere bei schlechter Internetverbindung und grossen Datenmengen auf der Website

- Apple unterstützt die progressive Web-App (PWA) teilweise nicht beim Zugriff auf bestimmte Geräte-Funktionalitäten; umfangreicher Zugriff ist nur möglich, wenn man die PWA über den iOS-App-Store vertreibt, was kostenpflichtig ist

- viele Nutzer wissen nicht, wie man im Browser ein Lesezeichen (App-Icon) auf dem Homescreen anlegt

- Web-Apps verbrauchen mehr Daten als native Apps, was sich in höheren Gebühren für den Datenverbrauch insbesondere im Ausland (Roaming) bemerkbar machen kann

Hybride Apps

Hybride Apps sind eine Mischung aus Web-Apps und nativen Apps. Die Programmierung des Quellcodes der App erfolgt in HTML5, CSS3 und JavaScript, also klassischem Website-Code. Dieser Code kann unter anderem auf den drei grossen Plattformen (Android, iOS und Windows) ausgelesen werden. Die hybride App wird über eine browsermässige Webansicht – einen sogenannten «Webview Container» – angezeigt und ist daher plattformunabhängig.

Über ein sogenanntes Framework kommuniziert der plattformübergreifende Quellcode der App mit dem jeweiligen Betriebssystem des Gerätes. Das Framework funktioniert hier quasi wie ein Dolmetscher zwischen der Web-Sprache und der nativen Geräte-Sprache.

Obwohl hybride Apps in einer browsermässigen Webansicht aufgerufen werden, hat der Nutzer das Gefühl, eine normale App zu öffnen, da alle typischen Browser-Elemente wie URL-Leiste und Navigations-Lesezeichen-Leiste fehlen.

Zur Programmierung von hybriden Apps können unter anderem folgende Frameworks genutzt werden: Ionic Framework und Apache Cordova (zuvor PhoneGap); daneben wird HTML5, CSS3 und JavaScript eingesetzt.

Das Ionic Framework hat sich mit den letzten Updates stark verbessert. Ausserdem werden aufkommende Technologien wie zum Beispiel «WebASM» dafür sorgen, dass hybride Apps immer näher an die Performance von nativen Apps heran kommen.

Apache Cordova ermöglicht über native Plug-ins den Zugriff auf Gerätefunktionen wie etwa Kamera, Mikrofon oder GPS.

Vorteile von hybriden Apps:

- der Quellcode ist plattform-unabhängig

- kostengünstiger als native Apps, da nur eine App für die drei grossen Plattformen (Android, iOS und Windows) entwickelt werden muss

- Zugriff auf Gerätefunktionen über Plug-ins möglich

- Vertrieb über App-Shops möglich

- mit nur geringem Zusatzaufwand kann eine hybride App so modifiziert werden, dass sie auch als Web-App im Browser laufen kann – sowohl auf mobilen Geräten als auch auf dem Desktop

Nachteile von hybriden Apps:

- jede Plattform hat typische Design- und Bedien-Elemente, hybride Apps können sich aber nicht so gut an diese von den Nutzern gewohnte Bedienoberfläche anpassen

- mit den Cordova-Plug-ins hat man zwar Zugriff auf Gerätefunktionen, aber die Brücke zwischen Web und nativem Code bringt technische Limitationen mit sich; vor allem bei hardware-nahen und performance-intensiven Anwendungen kann nicht dieselbe Qualität und Leistung wie mit nativen Apps erreicht werden

– sind noch keine Plug-ins für eine bestimmte Funktion vorhanden, können diese zwar durch den Entwickler geschrieben werden, allerdings ist das wegen der Komplexität oftmals zeitaufwendig und erhöht damit die Kosten

Cross-Plattform-Apps

Und schliesslich gibt es noch die Cross-Plattform-Apps. Bei diesen wird alles, was nicht nach aussen sichtbar ist, plattform-unabhängig zum Beispiel mit JavaScript (React Native) oder C# (Xamarin) programmiert. Das heisst, ein und derselbe Quellcode funktioniert auf iOS-, Android- und Windows-Geräten.

Allein die Benutzeroberfläche wird bei diesem sogenannten Cross-Compiler-Ansatz für jede Plattform separat aufgebaut – in der Regel mit Programmierschnittstellen des jeweiligen Betriebssystems. Hierin unterscheiden sich die Cross-Plattform-Apps von hybriden Apps, die die Benutzeroberfläche über den browsermässigen Webviewer aufbauen.

Durch den Verzicht auf die Webview-Komponente können Cross-Plattform-Apps benutzerfreundlicher gestaltet werden, also an das plattformspezifische Nutzer-Erlebnis angepasst werden. Ausserdem können Cross-Plattform-Apps verglichen mit hybriden Apps höhere Geschwindigkeiten beim Starten der App erreichen.

Auch Cross-Plattform-Apps funktionieren über ein Framework, das den Quellcode und die nativen APIs zusammenbringt. Zur Auswahl stehen: React Native (Facebook), Xamarin (Microsoft) und Titanium Mobile (Appcelerator).

Vorteile von Cross-Plattform-Apps:

- der Quellcode ist plattform-unabhängig

- die Benutzeroberfläche reagiert flüssiger als bei hybriden Apps

- besser an das Nutzer-Erlebnis auf der jeweiligen Plattform anpassbar als hybride Apps

- Zugriff auf Gerätefunktionen über Plug-ins möglich

- Vertrieb über App-Shops möglich

Nachteile von Cross-Plattform-Apps:

- es können hohe Lizenzgebühren für das verwendete Framework anfallen

- mit den Plug-ins hat man zwar auch hier Zugriff auf Gerätefunktionen, aber auch hier muss zwischen Web-Code (React Native verwendet JavaScript) und nativem Code eine Brücke gebaut werden mit der Folge von technischen Begrenzungen; Cross-Plattform-Apps sind daher leistungsschwächer und liefern geringere Qualität als native Apps

- auch für Cross-Plattform-Apps müssen Plug-ins geschrieben werden, wenn diese noch nicht vorhanden sind, was den Entwicklungs-Preis nach oben treibt

- ein weiterer Kostentreiber ist die Entwicklung der Benutzeroberfläche (englisch: User Interface, abgekürzt UI); anders als bei hybriden Apps wird das UI bei Cross-Plattform-Apps nicht über standardmässige Webtechnologien entwickelt; der Entwickler muss also mehr Arbeit investieren, womit bei den Cross-Plattform-Apps höhere Kosten als bei den hybriden Apps entstehen

Welche App passt am besten zum jeweiligen Projekt?

Native Apps sollten genutzt werden, wenn die geplante App eine hohe Komplexität aufweisen soll, sehr Performance-intensive Anwendungen ausführen muss – zum Beispiel viele Animationen, Videos oder Spiele – oder auf bestimmte Funktionen des mobilen Zielgerätes uneingeschränkt zugreifen muss.

Progressive Web-Apps sind auf einem guten Weg, aber leider kann ihr Potential auf der iOS-Plattform noch nicht voll entfaltet werden, es sei denn, man stellt sie über den App-Store zur Verfügung. Damit verliert die Web-App aber einen ihrer angedachten Vorteile: von App-Shops unabhängig zu sein. Wer hingegen keinen Zugriff auf bestimmte Gerätefunktionen benötigt, plattformunabhängig sein möchte und vor allem Texte mit ein paar kleinen Fotos und eingebundenen Videos veröffentlicht, ist mit einer Web-App gut bedient.

Hybride Apps eignen sich für Projekte mit schmalerem Budget, da der Entwicklungsaufwand durch die Einsatzmöglichkeit desselben Quellcodes für mehrere Plattformen geringer ist. Allerdings eignen sich die Hybriden nicht für Apps mit sehr hohen Leistungsanforderungen, da anderenfalls die Lade- und Reaktionsgeschwindigkeit leidet. Durch die Weiterentwicklung von Programmen und Technologien nähern sich hybride Apps immer mehr den nativen Apps an.

Zwar versprechen die Cross-Plattform-Apps etwas mehr Performance als die hybriden Apps. Angesichts des höheren Programmier-Aufwandes von Cross-Plattform-Apps und der damit verbundenen Kostensteigerung rentiert sich der Performance-Gewinn aber allenfalls für grössere Projekte. Für die meisten kleineren Apps lohnt sich die Mehrinvestition in Cross-Plattform-Apps nicht.

Will man kein Risiko in Bezug auf die Lade- und Reaktionsgeschwindigkeit seiner App eingehen, sollte man in jedem Fall eine native App ins Auge fassen. Um den Marktstart nicht zu verzögern, kann man die App zunächst nur für eine Plattform entwickeln lassen; im Idealfall diejenige, auf der die anvisierte Zielgruppe am grössten ist. Die nativen Apps für die anderen Plattformen kann man später entwickeln.

Folgende Fragen sollte man sich stellen, um herauszufinden, welche App am besten zum eigenen Projekt passt:

- Wo soll die App erhältlich sein?

- Welches Budget steht für die App-Entwicklung zur Verfügung?

- Soll die App Offline-fähig sein?

- Wie hoch muss die Performance der App sein, damit die nötige Lade- und Reaktionsgeschwindigkeit erreicht wird?

- Auf welchen Plattformen soll die App laufen?

- Auf welche Gerätefunktionen soll die App zugreifen?

- Wie schnell muss die App fertig sein?

- Wie wichtig ist die Qualität des Nutzer-Erlebnisses bezüglich des Designs und den Bedien-Elementen?

Die Unterschiede zwischen den mobilen App-Typen im Überblick