Entwicklung & Design

Plattformübergreifende Apps mit Web-Technologien entwickeln: Eine für alle

Der Smartphone-Markt wächst rasant und wird dadurch zunehmend unübersichtlicher. Das verunsichert nicht nur Käufer, sondern auch Anbieter mobiler Apps: Wie kann man effizient für alle relevanten Systeme entwickeln, wenn jeder Hersteller andere Schnittstellen in unterschiedlichen Programmiersprachen zur Verfügung stellt? Das Problem lässt sich mit herkömmlichen Web-Technologien für viele Anwendungen geschickt umgehen – auch für native Apps.

Mit der Einführung des iPhones hat Apple Smartphones zu breiter Akzeptanz verholfen. Darüber hinaus hat der 2008 gestartete App-Store bei Benutzern großen Anklang gefunden und ist dadurch zu einem attraktiven Vertriebskanal für Entwickler geworden. In der Folge sind auch andere Smartphone-Hersteller wie BlackBerry oder Palm zum Vertrieb über einen integrierten Store übergegangen oder – wie Google mit Android – überhaupt erst ins mobile Geschäft eingestiegen. Für App-Entwickler, die mehrere Plattformen bedienen wollen (oder müssen), wird die Fragmentierung von Programmiersprachen und Frameworks zunehmend zum Problem.

Apples iOS-Apps werden mit Objective-C entwickelt, Android- und BlackBerry-Apps in Java geschrieben – mit unterschiedlichen Frameworks. Andere relevante Plattformen sind Windows Mobile, das neu erschienene und nicht abwärtskompatible Windows Phone7 sowie Nokias Symbian. Außerdem verhilft HP dem mit Palm übernommenen webOS eventuell noch zum bislang ausgebliebenen Erfolg; die Rede ist dann von sieben unterschiedlichen Betriebssystemen. Will man mehrere Plattformen bedienen, bedeutet das üblicherweise die komplette Neuentwicklung der Applikation. Für jedes System.

Mit Web-Technologien entwickeln

In diese Lücke stößt die Applikationsentwicklung mit Web-Technologien: Der „kleinste gemeinsame Nenner“ aller Smartphone-Betriebssysteme ist ein installierter Browser. Das macht web-basierte Applikationen mit Smartphone-optimierter Oberfläche zu einer interessanten Alternative für native Apps. Dank neuer Browser-Technologien sind Web-Apps zudem offline-fähig und können auf die aktuelle Position des Benutzers zugreifen. Zudem kann die Oberflächenentwicklung mit HTML und CSS auch im mobilen Bereich ihre Stärken ausspielen: Anpassungen an verschiedene Bildschirmauflösungen sind mit bekannten Mitteln möglich.

Googles GMail-Web-App versteckt – im iPhone-Browser geöffnet – das Adressfeld, um die Bildschirmfläche effizient zu nutzen. Auf dem Home-Screen lassen sich Verknüpfungen zu Websites mit individuellen Icons anlegen. Durch spezielle Meta-Informationen legt man zudem einen Lade-Screen und das Farbschema der Titelleiste fest.

Googles GMail-Web-App versteckt – im iPhone-Browser geöffnet – das Adressfeld, um die Bildschirmfläche effizient zu nutzen. Auf dem Home-Screen lassen sich Verknüpfungen zu Websites mit individuellen Icons anlegen. Durch spezielle Meta-Informationen legt man zudem einen Lade-Screen und das Farbschema der Titelleiste fest.

Durch den Application Cache können moderne Smartphone-Browser alle benötigten Ressourcen zwischenspeichern und die Seite auch ohne mobile Datenverbindung wieder öffnen. Dazu muss ein sogenanntes „Cache Manifest“ erstellt und im Markup referenziert werden, das alle zu speichernden Dateien auflistet. Unterstützung dafür findet sich in iOS, Android (ab Version2) und BlackBerry6. Auch webOS wird diese Spezifikation in der kommenden Version2.0 implementiert haben. Während auf den meisten Systemen eine solche App aus den Browser-Favoriten heraus gestartet wird, bietet iOS die Option, Seiten zum Homescreen hinzuzufügen (über das Plus-Symbol in Safari). Mit speziellen Meta-Tags spezifiziert man dafür ein Icon und deklariert die Fähigkeit zum Vollbildmodus. Wird die Seite dann vom Home-Screen geöffnet, läuft sie ohne Navigationsleiste und Toolbar und ist von einer nativen App nicht mehr auf Anhieb zu unterscheiden.

Beeindruckende Anwendungen dieser Technologie sind das iPhone-Benutzerhandbuch (zu finden in den Safari-Lesezeichen) und OpenAppMkt [1]. Das Benutzerhandbuch lässt sich zum Home-Screen hinzufügen und benutzt eine Kombination aus Application Cache und lokaler Datenablage, um alle benötigten Ressourcen lokal zu speichern. Dies nimmt beim ersten Start einige Zeit in Anspruch, danach steht das Handbuch jederzeit auch offline zur Verfügung.

OpenAppMkt verwendet Application Cache, um einen „App Shop“ für HTML-Apps auf dem iPhone anzubieten. Entwickler können ihre App auf der Plattform einstellen. User durchsuchen von dort aus die gelisteten Programme, öffnen deren jeweilige Applikation mit Safari und werden dann aufgefordert, die Seite auf ihrem Home-Screen dauerhaft zu speichern. Die auf diese Weise installierten Apps lassen sich dann auch offline starten.

Hardware-Zugriff

Benutzerdaten lassen sich auf vielen Geräten mit unterschiedlichen Technologien speichern (etwa über localStorage oder Browser-SQL-Datenbanken) – zum Beispiel, um individuelle Einstellungen zu speichern oder Daten inkrementell herunterzuladen. Im Einsatz kann man diese Technologie beispielsweise bei Google Mail ausprobieren: Einmal abgerufene Mails lassen sich auch offline wieder öffnen. Es können sogar Mails ohne Internetverbindung verfasst werden; sobald wieder eine Verbindung zur Verfügung steht, verschickt GMail diese. Das funktioniert auch, je nach Art der Speicherung, nachdem der Browser geschlossen wurde oder sogar nach einem Neustart des Geräts.

Außerem ermöglichen viele Geräte im Browser die Bestimmung des aktuellen Standorts. Dafür greifen Smartphones auf so genanntes „Assisted GPS“ zurück, bei dem eine Kombination aus GPS-Position, W-LAN-Informationen und Angaben zu den aktuell genutzten Zellen des Mobilfunknetzes errechnet wird. Ist das Gerät offline, fällt ein Teil dieser Angaben weg. Die Lokalisierung dauert dann etwas länger, ist aber durchaus auch ohne Netzverbindung nutzbar. Gemeinsam mit der lokalen Datenspeicherung lassen sich mit einer Web-App also schon recht viele Szenarien und Ideen abdecken. Zudem haben mobile Web-Apps den Vorteil, jederzeit aktualisierbar zu sein, ohne sich vom Review-Prozess der Shop-Anbieter abhängig zu machen.

Für die Entwicklung von Oberflächen kann man im mobilen Bereich auf verschiedene Frameworks zurückgreifen. Die Vertreter dieser Gattung sind zur Zeit auf WebKit-basierte Browser beschränkt – damit werden BlackBerry erst ab Version6, Windows-basierte Telefone überhaupt nicht unterstützt. Zu den wichtigsten zählen jqTouch und Sencha Touch; beide Frameworks bieten unterschiedliche Entwicklungsmodelle. Einen guten Eindruck macht auch das aus der JavaScript-Bibliothek heraus entstandene jQuery Mobile [2], doch die Bibliothek befindet sich erst im Alpha-Stadium.

jqTouch

jqTouch [3] verwendet einen progressiven Ansatz im Sinne klassischer Webentwicklung. Der Entwickler muss die Bibliothek in sein HTML-Dokument einbinden und einige Regeln bei der Erstellung des Gerüsts beachten. So stellt jedes Kindelement des Body-Elements einen eigenständigen Screen dar. Durch die Verwendung verschiedener CSS-Klassennamen wie „toolbar“ oder „button“ lassen sich Interface-Komponenten stylen und kombinieren. Das genaue Aussehen wird durch Themes bestimmt, von denen jqTouch ein am iPhone orientiertes und ein generischeres, dunkles, mitbringt.

Zwischen den verschiedenen Screens navigiert man mit Links, die eine ID anderer Screens referenzieren. Die Bibliothek bietet verschiedene Animationen für Screen-Übergänge an, darunter auch das für iOS typische Verschieben. Auch die Übergänge werden durch Klassennamen bestimmt, in diesem Fall auf dem entsprechenden Link. Weil jqTouch auf vorhandenem Code aufbaut, laufen darauf basierende Apps auch in Browsern, die keine Unterstützung für die jeweiligen WebKit-Spezialitäten bieten.

Geolocation im Browser
Verschiedene Smartphone-Browser bieten per JavaScript Zugriff auf die aktuelle Position des Benutzers. Dabei gibt es drei verschiedene Methoden: iOS, Android (ab Version2) und BlackBerry6 unterstützen den W3C-Standard, der die Positionsbestimmung über navigator.geolocation ermöglicht. Auch in webOS 2.0 wird dieses Objekt zur Verfügung stehen. Ältere Android-Versionen können die entsprechende Funktionalität aus Google Gears verwenden. BlackBerry-Geräte bieten ab Version 4.1 außerdem eine API über das proprietäre blackberry.location-Objekt. Für alle BlackBerrys gilt dabei, dass der Benutzer die Verwendung der Position explizit über die Browser-Einstellungen erlauben muss.
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
ab
ab

Warum wird hier nicht mit einem Wort auf Adobe AIR eingegangen? AIR-Anwendungen laufen komplett ohne Anpassungen auf Android, iOS, Blackberry UND den drei großen Dektop-Plattformen…

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung