Übersicht

Development & Coding

Markus Greve 09.12.2013

HTML5, Firefox OS, Mobile, Apps, Responsive webdesign

App Entwicklung für den Feuerfuchs

Zugegeben – ein bisschen skeptisch war ich ja schon, als ich das erste mal davon gehört hatte, das Mozilla ein weiteres Betriebssystem für Mobilgeräte entwickeln möchte; standesgemäß auf Basis von Gecko, also der Rendering Engine des beliebten Firefox-Browsers. Neben iOS, Android und vielleicht noch am Rande Windows Phone und BlackBerry würde ich als Herausgeber den zusätzlichen Aufwand für eine weitere Plattform gerne vermeiden - dachte ich. Was ich mittlerweile herausgefunden habe: genau da liegt der Vorteil der vermeintlich zusätzlichen Plattform! Denn aufgrund der Web-Wurzeln gelingt der Übertrag einer bestehenden HTML5-basierten Anwendung mit minimalem Aufwand - weshalb ich in diesem dritten »INC.HOWTO« die wichtigsten Bestandteile für den Einstieg beschreiben möchte. 

 

»Mozilla verteilt kostenlose Smartphones«

Oder so ähnlich lautete die Meldung, die über die einschlägigen Newsticker z.B. bei heise.de und Golem lief. Nachdem ich durch ein ähnliches Programm vor geraumer Zeit ein BlackBerry Playbook ergattern konnte, fand ich die Aufforderung »Calling all Porters«, im September spannend. Eine zu portierende App war schnell zur Hand. Auf den Tag genau zwei Wochen nach meiner »Bewerbung« kam dann die Nachricht:

»Congratulations. We’ve reviewed and accepted your Firefox OS app porting proposal and we’d like to invite you to participate in the Firefox OS Phones for App Ports program.«

Und tatsächlich: Ende der ersten Oktober-Woche erreichte mich dann dieser Würfel – die App Portierung konnte (und musste!) beginnen!

Dokumentation

Die erste Anlaufstelle für die Einführung in den Entwicklungsprozess ist das App Center im Mozilla Developer Network (MDN). Von den konzeptionellen Grundlagen und dem Design über den Entwicklungsprozess bis zur Veröffentlichung im Mozilla-eigenen Firefox Marketplace werden alle Themenbereiche abgedeckt. Wenn es um die Ausgestaltung der App mit Grafiken, mindestens mal dem App Icon, geht, hilft ein umfangreicher Styleguide weiter. 

Die diesem Post zugrunde liegende Schritt-für-Schritt-Anleitung mit allen Code-Beispielen befindet sich ebenfalls in Präsentationsform auf Slideshare. Die darin enthaltenen Bestandteile, werden in den folgenden Zeilen beschrieben.

Simulator vs. Smartphone

Im Funktionsumfang des Simulator steckt vermutlich noch mit am meisten Arbeit für die Mozilla Community. Die prinzipiell gute Idee, den Simulator als PlugIn für Firefox anzubieten krankt derzeit noch ein bisschen daran, das für den gerade noch aktuellen Firefox 25 nur Firefox OS 1.1 und nicht das neuere 1.2 verfügbar ist. 

Nebenbei crasht der Simulator auf Firefox 25 mit Apples neuem Betriebssystem Mac OS X 10.9 Mavericks reproduzierbar. Insofern führt der empfohlene Weg nur über die Beta-Version von Firefox 26 (wobei es bis zum Release-Termin laut dem RapidRelease Calendar ja nur mehr wenige Tage sind - oder heute?). 

In Firefox 26 wird über about:app-manager das neue App Dashboard aufgerufen und der Simulator installiert. Das Dashboard leistet anschließend gute Dienste bei der Verwaltung der installierten Apps und erlaubt auch das Debugging laufender Anwendungen mit den von Firefox gewohnten Entwicklertools. Der Simulator selbst läuft zwar mit Firefox OS 1.2, scheint aber sonst ein paar Rückschritte gemacht zu haben – es fehlen beispielsweise die aus dem alten PlugIn bekannten Buttons für die Geolocation-Simulation oder das Drehen des »Smartphones« in die Landscape-Ansicht.

Zutaten aus dem Internet

Apps für FirefoxOS bestehen komplett aus den Bestandteilen, die in der Web-Entwicklung gang und gäbe sind: HTML5 für die Oberflächendefinition, CSS3 für das Erscheinungsbild und Javascript für die Abbildung auch komplexer Funktionalitäten. Während bereits HTML5 mit einer Vielzahl neuer Programmierschnittstellen aufwartet, ergänzt Mozilla für Firefox OS noch Funktionalitäten die für den Smartphone-Einsatz erforderlich sind, u.a.

  • Telephony und WebSMS
  • WebBluetooth
  • Battery Status
  • Vibration
  • Camera
  • ... und vieles mehr bis zum Ambient Light Sensor

Im Mozilla Developer Network findet sich eine vollständige Aufstellung unter dem Stichwort WebAPI.

Um möglichst schnell zu einer ersten laufenden App zu kommen, habe ich mich zum Anfang erstmal mit den sogenannten »Hosted Apps« auseinander gesetzt. Diese Apps werden auf einem Webserver abgelegt und können direkt übers Netz installiert werden. »Installed Apps« verfügen über weiter reichende Berechtigungen, erfordern aber auch eine zusätzliche Zertifizierung, die ich mir zunächst ersparen wollte.

Wichtig für beide App-Typen ist das sogenannte »Manifest«, eine JSON-Datei, die sämtliche Meta-Informationen zu einer App enthält und damit grundlegende Einstellung wie z.B. die Festlegung der Startseite vornimmt. 

Für die gesamte App und auch das Manifest gilt die »Same origin policy«, nach der eine App mit Bestandteilen über die gleiche Domain, Protokoll und Port interagieren kann. Im Umkehrschluss bedeutet das, das pro (Hosted) App die Einrichtung einer (Sub-)Domain erforderlich ist! Apropos Infrastruktur: für die meisten Webserver wird es noch erforderlich sein, für den Dateityp .webapp den korrekten Mime-Typ zu konfigurieren:

AddType application/x-web-app-manifest+json .webapp

Die vollständige Dokumentation zu dem Inhalt der Manifest-Datei ist im Developer Network im Kapitel App manifest nachzulesen. 

Installer

Den Unterschied zwischen Website und Webapp macht die Installation auf dem Handy. Dazu verfügt die WebAPI von Mozilla unter anderem über die Methoden navigator.mozApp.checkInstalled(url) und navigagtor.mozApp.install(url, [reciept]), die als url jeweils die Adresse eines WebApp Manifests entgegen nehmen. 

Beim erstmaligen Aufruf von install() werden die Meta-Angaben aus dem Manifest dargestellt (Entwickler, Beschreibung, benötigte Berechtigungen) und abgefragt, ob die App installiert werden soll. Ein Beispiel für ein Installer-Grundgerüst ist in dem Starter-Package enthalten.

Ist die App einmal installiert, nistet sie sich in Form eines Icons auf dem Homescreen ein und lässt sich von dort aus starten. Inwieweit dazu in der Folge eine Internet-Verbindung erforderlich ist, hängt davon ab, welche Funktionalitäten enthalten sind. Prinzipiell lassen sich auch Hosted Apps u.B. mit dem app_cache offline verwenden.

Schritt-für-Schritt zur laufenden App

Zum Schluss hier zusammengefasst die einzelnen Schritte bis zur ersten laufenden FirefoxOS App:

  1. Firefox 26 Beta installieren
  2. App-Manager und Simulator hinzufügen: about:app-manager
  3. (Sub-)domain einrichten
  4. HTML-Quellen, grafische Bestandteile und Manifest zusammenfügen
    Ein einfaches Starter-Package kann hier heruntergeladen werden.
  5. Im Simulator installeren

Läuft die Anwendung im Simulator wie gewünscht, kann die Installation auf dem konkreten Gerät erfolgen. Wenn man nicht das Glück hat, im Rahmen des Port-a-App Programms eines zu ergattern: mittlerweile gibt es die Smartphones des Herstellers »Geeksphone« auch in Deutschland zu kaufen. Mittlerweile verkauft die Telekom Tochter congstar das Alcatel One Touch FIRE für etwa 90 Euro – weitere Hersteller und Mobilfunkanbieter haben ebenfalls Geräte angekündigt.

Zur Installation ruft man einfach mit dem Browser (also dem Firefox ;-) die Adresse der Startseite der App auf. Der enthaltene Installer-Code stellt fest, dass noch keine Installation erfolgt ist und nimmt – im Fall der Muster-App – die entsprechenden Aufrufe vor. Am Schluss findet sich das entsprechende App-Icon auf dem Homescreen des Telefons.

Randnotiz: umfangreiche Unterstützung

Einen letzten Aspekt möchte ich zusätzlich betonen: die Unterstützung durch Mozilla fand ich sensationell. Bereits kurz nach der ersten Nachricht über den »Gewinn« des Geeksphone Keons meldete sich ein Mozilla Evangelist, der  Unterstützung anbot - die dann während der Tests auch kurzfristig genutzt wurde. Nach der Veröffentlichung der App wurde ich gebeten, die gewonnenen Erfahrungen weiterzugeben um den Entwicklungsprozess weiter voranzubringen.

Gerade auch nach einer Reihe von negativen Erfahrungen mit der Entwicklung von Windows Phone Apps komme ich zu der Einschätzung, dass gerade dieser Umgang mit den potentiellen Herausgebern den Unterschied ausmachen kann. In unseren künftigen Projekten werden wir jedenfalls prüfen, ob eine Publikation auch als Firefox OS App sinnvoll ist.