Mozilla

Firefox OS
Kommentare

Auf dem diesjährigen Mobile World Congress in Barcelona war Firefox OS in aller Munde. Mozillas neues Betriebssystem für Mobiltelefone unterscheidet sich in wesentlichen Punkten von bestehenden Marktführern wie iOS, Android, BlackBerry und Windows.

Mit den neuen Firefox-OS-Geräten werden die ersten Open-Web-Devices weltweit eingeführt. Aufstrebende Länder in Südamerika oder auch Polen in Europa werden zu den ersten gehören, in denen Firefox-OS-Smartphones erhältlich sein werden. Ziel des Projekts ist es, mobilen Internetzugang in Märkten anzubieten, in denen sich die Menschen kaum ein anderes System leisten können. Weit verbreitete Feature Phones von Nokia, Ericsson oder Motorola, die gerade einmal über rudimentäre Handyfunktionen verfügen, werden damit in den Ruhestand geschickt.
Gleich achtzehn Mobilfunkanbieter aus aller Welt sowie vier Hardwarehersteller sind von der Firefox-OS-Initiative begeistert und unterstützen die Non-Profit-Organisation Mozilla. Noch in diesem Jahr sollen die ersten Smartphones auf den Markt kommen.
Firefox-OS-Smartphones basieren primär auf HTML5-Technologie. Außerdem sind sowohl der Quellcode als auch die Definitionen der APIs offen und als Standards anderen Anbietern und dem W3C zugänglich.


Der VW Käfer der Smartphones

Die Systemeigenschaften tragen dazu bei, dass die Hardware sehr einfach gehalten werden kann. Sowohl das ZTE Open (Abb. 1) als auch das Alcatel One Touch arbeiten mit einem 1-GHz-Prozessor und 256 MB RAM. Wenn man das Betriebssystem Android auf die gleiche Hardware installieren würde, wäre Honeycomb die letzte unterstützte Version und die HTML5-Fähigkeit des Geräts vom Android-Standardbrowser bestimmt. Mozillas OS ist einfach für Anbieter zu konfigurieren. Die Benutzeroberfläche als auch die Apps werden nur mit HTML5, CSS und JavaScript erstellt. Endkunden erfreuen sich somit an kleineren Apps, die weniger Speicher auf dem Handy benötigen und einfach instand zu halten sind. Eben wie bei einem Käfermotor, den man mit nur vier Schrauben ein -und ausbauen konnte.

Abb. 1: Das ZTE Open mit Firefox OS


Sparsam durch wenig Architektur

Das bedeutet nicht, dass Firefox OS nur aus einem Browser besteht. Der Linux-Kern Gonk, der auch Android erlaubt, greift auf die Hardware zu. Darüber liegt die Browser-Engine Gecko, die auch im Firefox für Desktop und Firefox für Android in Betrieb ist. Die letzte Ebene ist Gaia – ein User Interface, das mit HTML5 erstellt wurde. Entwickler von Mozilla und den Partnerfirmen wie Telefónica, Deutsche Telekom oder Qualcomm haben diese Bausteine entwickelt, die sich jeder über GitHub als Open-Source-Daten herunterladen kann. Die Schnittstelle zwischen dem Linux-Kern und Gecko sind offene JavaScript-API-Spezifikationen, die es Webentwicklern ermöglichen, auf die gesamte Hardware zuzugreifen. Diese werden auch von anderen Browsern unterstützt und helfen damit, HTML5 als Plattform voranzutreiben. So können zum Beispiel Apps für Firefox OS auch auf Android-Smartphones installiert werden, die mit dem Firefox-Browser ausgestattet sind.

Apps sind „surfbar“
Nach dem Einschalten und der Personalisierung des Firefox-OS-Smartphones stehen dem Nutzer alle Apps zu Verfügung, die man von einem Smartphone erwarten kann: eine Karten-App (Nokia Here Maps), Twitter, Facebook, eine Kontaktverwaltung sowie eine Kamera-App und einige Spiele, die mit Partnern wie Electronic Arts und Zeptolab erstellt wurden. Alle neuen Apps kann man im Firefox OS Marketplace finden und installieren (Abb. 2).

Abb. 2: Der Firefox OS Marketplace

Und damit punktet Firefox OS. Da die Apps auf HTML5 basieren, können sie wie Webseiten „ersurft“ werden. Mit einer einfachen Wischgeste auf dem Startbildschirm gelangt man zu einer Suchmaske, die die Apps nach Inhalten und nicht nur nach deren Namen durchsucht (Abb. 3). Gibt man beispielsweise den Bandnamen „U2“ ein, findet man im Firefox OS Marketplace nicht nur Musik-Apps wie SoundCloud und Grooveshark, sondern auch Wikipedia-Einträge zu U2 oder Metrolyrics zu den Liedtexten.

 

Abb. 3: Im Firefox OS Marketplace werden thematisch passende Apps zu jedem Suchbegriff vorgeschlagen

Nutzer brauchen sich keine vollständigen Apps, die meist mehrere Megabyte umfassen, herunterladen und installieren. Sie können die Apps vortesten und erst in einem zweiten Schritt installieren und damit offline verwenden. Das hat auch einen großen Vorteil für Entwickler. Eine für Mobiltelefone optimierte Webseite ist die Visitenkarte für eine App und kann leicht umgewandelt werden.

[ header = Alles ist HTML5 ]


Alles ist HTML5

Für Entwickler bedeutet Firefox OS, dass HTML5 eine mobile Plattform erhält, bei der Webtechnologien keine untergeordnete Rolle spielen, sondern man mittels HTML5, CSS und JavaScript vollen Zugriff auf die Funktionalität des Mobiltelefons bekommt.
Um eine mobile Webseite in eine Firefox-OS-App zu verwandeln, muss man lediglich die Offlinedaten mittels AppCache und LocalStorage oder IndexedDB definieren sowie den Namen und die Zugriffsrechte der App in einem Manifest beschreiben. Die Offlinedefinitionen sind ohnehin notwendig, um die App auch auf iOS und Android zum Laufen zu bringen. Mit dem Manifest bekommt die App im Ecosystem von Firefox OS einen Platz. Eine bereits bestehende HTML5-App im Web lässt sich in nur zwei Schritten für Firefox OS befähigen.

  • Erstellung eines Open-App-Manifests wie hier definiert
  • Anmeldung der App im Mozilla Marketplace oder die Installation aus der App heraus mittels Web Activities

Im Developer Hub von Mozilla (Abb. 4) finden Entwickler Informationen, wie man eine gute HTML5-App kreiert, entwickelt und für Firefox OS anbietet. Weitere Informationen zu den verwendeten Webstandards und -technologien findet man auch im Mozilla Developer Network.

 

Abb. 4: Alles, was man zum Thema Apps für Firefox OS wissen muss, ist im Marketplace erklärt

Das Erstellen der App ist nicht an eine bestimmte IDE oder Arbeitsumgebung gebunden. Wie auch in der Webentwicklung kann man von VI auf der Kommandozeile bis hin zu Eclipse alles verwenden, womit man sich am besten zurechtfindet. Es gibt bislang noch kein definiertes SDK und als Entwickler muss man sich weder anmelden noch Gebühren zahlen. Der Grundgedanke von Mozilla ist es, das Web frei und für jedermann zugänglich zu halten – und das spiegelt sich auch im Firefox OS wider.

Open Apps
Im Open-App-Manifest definiert der Entwickler, wie die App heißen soll, welche Icons verwendet werden und auf welche Funktionalität des Handys die App Zugriff hat. Das Manifest ist ein JSON-Dokument. Die HTML5-Demo-App „What2Pack“ zum Beispiel, die auch im Firefox Marketplace angeboten wird, liegt auf meinem Testserver und ist durch das Manifest aus Listing 1 definiert.

{
  "version": "0.0.2",
  "name": "What2Pack?",
  "launch_path": "/demos/what2pack/index.html",
  "description": "What2Pack allows you to quickly look up the weather in different locations and compare",
  "icons": {
    "16": "/demos/what2pack/applogos/logo16.png",
    "32": "/demos/what2pack//applogos/logo32.png",
    "48": "/demos/what2pack//applogos/logo48.png",
    "64": "/demos/what2pack//applogos/logo64.png",
    "128": "/demos/what2pack//applogos/logo128.png"
  },
  "developer": {
    "name": "Christian Heilmann",
    "url": "http://thewebrocks.com/demos/what2pack"
  },
  "installs_allowed_from": ["*"],
  "default_locale": "en"
}

Drei Sicherheitsstufen für Apps
Das obige Beispiel ist eine so genannte hosted App, da sie auf meinem Server liegt. Generell gibt es drei Sicherheitsstufen für Firefox-OS-Apps, die definieren, was die App alles „darf“. Dies ist nötig, um zum Beispiel nicht jeder App zu erlauben, Textnachrichten zu verschicken oder Telefonate zu führen, ohne dass der Endnutzer davon etwas mitbekommt. Die drei verschiedenen Sicherheitsstufen sind hosted, privileged, und certified.
Eine hosted App kann auf dem eigenen Server liegen und ist damit auch einfach zu verändern und auf dem neuesten Stand zu halten. Da Mozilla aber nicht den Server verwaltet und dessen Sicherheit gewährleisten kann, darf die App nur auf einen Bruchteil der Hardware zugreifen.
Eine detaillierte Aufzählung, was Apps alles dürfen und welche Sicherheitsstufen nötig sind, findet man hier. Kurz beschrieben bedeuten die verschiedenen Sicherheitsstufen Folgendes:

  • Eine App, die nicht auf den Servern von Mozilla liegt, ist eine hosted App.
  • Wenn man im App-Manifest nach mehr Zugang fragt, wird aus der App eine privileged App. Diese muss von dem Mozilla-Marketplace-Team zertifiziert werden und eine Content Security Policy haben. Weiterhin müssen privileged Apps eine Signatur besitzen und durch den Firefox Marketplace installiert sein.
  • Certified Apps definieren die Funktionalität des Betriebssystems und können damit auf alles zugreifen. Diese können nur von Mozilla und deren Partnern erstellt werden.

Die Art der App definiert, welche der Web-APIs angewandt werden dürfen.


Web-APIs

Apps in Firefox OS können mittels Web-APIs auf die Hardware zugreifen. Im Gegensatz zu herkömmlichen Plattformen für HTML5, wie iOS und Android, haben Entwickler durch JavaScript direkten Zugang zu den verschiedenen Hardwarekomponenten des Handys. So kann man beispielsweise mit window.navigator.battery.level auslesen, zu wie viel Prozent der Akku noch geladen ist. Mit einem einfachen window.navigator.vibrate(1000) kann man zum Beispiel das Handy eine Sekunde lang vibrieren lassen. Diese Funktionalität ist als Web-API-Standard definiert und wird auch schon von anderen Browsern unterstützt. Eine App, die auf dem eigenen Server liegt, hat Zugriff auf die folgenden APIs:

  • Vibration-API (für die Smartphonevibration)
  • Screen Orientation (der Entwickler definiert die Orientierung des Handys)
  • Geolocation-API (Lokalisierung)
  • Mouse-Lock-API (erlaubt Anwendungen direkten Zugriff auf den Mausanzeiger, 3-D-Spiele können sich somit besser bedienen lassen)
  • Open-Web-Apps (Installieren von Apps durch JavaScript)
  • Network-Information-API (Ist das Handy online oder offline? Wie schnell ist die Verbindung?)
  • Battery-Status-API (Wie voll ist die Batterie?)
  • Alarm-API (Weckerfunktion des Handys)
  • Push-Notifications-API (Informationen an den Endnutzer schicken, ohne dass die App gerade offen ist)
  • WebFM-API/FMRadio (Radiofunktionalität)
  • Web Payment (Bezahlfunktion in der App)
  • IndexedDB (Datenbankzugriff für Apps)
  • Ambient light sensor (Wie hell ist es derzeit?)
  • Proximity sensor (Wie weit sind zwei Handys voneinander entfernt)
  • Notification (Dem Endnutzer eine Nachricht anzeigen)

Die Nutzung von Web-APIs ist relativ einfach. Um zum Beispiel eine App vom Web zu installieren, braucht man nur das passende API aufzurufen (Listing 2).

var AppInstallieren = navigator.mozApps.install(manifestURL);
AppInstallieren.onsuccess = function(data) {
  // App ist installiert
};
AppInstallieren.onerror = function() {
 // App konnte nicht installiert werden, der Fehler ist in 
 // AppInstallieren.error.name
 // beschrieben.
};

Dies ist auch eine Alternative zum Listing im Firefox Marketplace, wenn man nur eine hosted App erstellen will. Um herauszufinden, wie die derzeitige Verbindung ist, braucht man nur das Objekt aus Listing 3 auszulesen.

var verbindung = window.navigator.mozConnection,
    online = verbindung.bandwidth,
    metered = verbindung.metered;

Wenn online „0“ ist, ist das Handy offline, „infinity“ bedeutet, dass die Verbindungsgeschwindigkeit nicht ausgelesen werden kann. Alle anderen Werte sind die Geschwindigkeit in Megabyte pro Sekunde. Wenn „metered“ wahr ist, bedeutet das, dass der Mobilfunkanbieter die Verbindung verlangsamt, um zum Beispiel Daten zu sparen oder eine bestimmte Menge an Daten wurde bereits verwendet. Um den Status der Batterie abzurufen, gibt es Attribute und Events, die man in den Apps verwenden kann (Listing 4).

var Batterie = navigator.battery;
if (Batterie) {      var batteryLevel = Math.round(Batterie.level * 100) + "%",          laedt = (Batterie.charging) ? "" : "not ",          ladeZeit = parseInt(Batterie.chargingTime / 60, 10),
      entladeZeit = parseInt(Batterie.dischargingTime / 60, 10);
  // Rufe show() auf wenn sich der Status der 
  // Batterie aendert
  Batterie.addEventListener("levelchange", show);
  Batterie.addEventListener("chargingchange", show);
  Batterie.addEventListener("chargingtimechange", show);
  Batterie.addEventListener("dischargingtimechange", show); } 

Apps, die von Mozilla zertifiziert wurden, können tiefer auf das System zugreifen. Die folgenden APIs sind derzeit vorhanden:

  • Device-Storage-API (Informationen auf dem Handy speichern und vorhandene systemweite Daten auslesen)
  • Browser-API (eigene Browser im System erstellen)
  • TCP-Socket-API (Verbindungen per TCP erstellen)
  • Contacts-API (auf die Kontakte im Handy zugreifen)
  • systemXHR (Daten von anderen Servern laden)

Um zum Beispiel einen neuen Eintrag im Kontaktbuch zu erstellen, kann man das Skript aus Listing 5 schreiben.

var Kontakt = new mozContact();
Kontakt.init({name: "Christian"});
var Anfrage = navigator.mozContacts.save(Kontakt);
Anfrage.onsuccess = function() {
  // Kontakt wurde erstellt
};
Anfrage.onerror = function() {
  // Kontakt konnte nicht erstellt werden
};
 
Apps, die Teil des Betriebssystems sind, können auf die folgenden APIs zugreifen:
  • Web Telephony (Telefonate führen)
  • WebSMS (Textnachrichten verschicken)
  • Idle-API (das Handy aktivieren, falls neue Daten vorhanden sind)
  • Settings-API (Einstellungen des Handys dynamisch ändern)
  • Power-Management-API (Bildschirmschoner einschalten oder den Bildschirm verdunkeln)
  • Mobile-Connection-API (Verbindungsgeschwindigkeit über SIM abrufen)
  • WiFi-Information-API (Informationen über die WIFI-Verbindung herausfinden)
  • WebBluetooth (Bluetooth-Geräte erkennen und verwenden oder Daten verschicken)
  • Permissions-API (Dynamische Änderung der Zugriffsrechte – natürlich durch den Endnutzer und nicht automatisch)
  • Network-Status-API (Status der Netzverbindung)
  • Camera-API (Zugriff auf die Kamera)
  • Time-/Clock-API (Zeit und Datum des Handys auslesen)
  • Attention screen (Fehlerbehandlung und Systemnachrichten an den Endnutzer schicken)
  • Voicemail (Sprachnachrichten abrufen und erstellen)

Um ein Telefonat zu führen, genügt der Code, der in Listing 6 dargestellt ist.

var tel = navigator.mozTelephony;
// Ist die Lautstaerke des Handys auf Null? 
// (lesbar und schreibbar)
console.log(tel.muted);
// Ist der Lautsprecher an? (lesbar und schreibbar)
console.log(tel.speakerEnabled);
// Rufe 123456789 an 
var call = tel.dial("123456789");
// Was passiert waehrend des Anrufs?
call.onstatechange = function (event) {
    console.log(event.state);
    /*
        Rueckgabewerte:
        "dialing", "ringing", "busy", "connecting", "connected", 
        "disconnecting", "disconnected", "incoming"
    */
};
 // Alle Werte sind auch als eigene Events erreichbar:
call.onconnected = function () {
    // Anruf ging durch
};
call.ondisconnected = function () {
    // Anruf wurde aufgehaengt
};
// Handy wird angerufen
tel.onincoming = function (event) {
    var incomingCall = event.call;
    // Nummer des Anrufers
    console.log(incomingCall.number);
    // Anruf annehmen
    incomingCall.answer();
};
// Aufhaengen
call.hangUp();

Alle Arten von Apps können auch tiefer in das System vordringen, allerdings nicht automatisch, sondern durch Freigabe des Endnutzers. Dafür gibt es die Web Activities.

[ header = Web Activities]


Web Activities

Der einfachste Weg, um auf die Handyhardware zuzugreifen ist es, den Endnutzer auf betriebssystemeigene Apps zu verweisen. Dafür gibt es einen weiteren Standard: die Web Activities. Derzeit sind folgende Web Activities vorhanden:

  • configure (zur Konfiguration der App springen)
  • costcontrol/balance, costcontrol/data_usage, costcontrol/telephony (Anfrage der bisher verwendeten Datenmenge bzw. des bisherigen Datenverbrauchs)
  • dial (Anrufen)
  • open (ein Dokument öffnen, beispielsweise ein Video mit dem Videoplayer oder ein Musikstück mit dem Musikplayer)
  • pick (eine Datei importieren, zum Beispiel Bilder)
  • record (ein Photo, Video oder Musikstück aufnehmen)
  • save-bookmark (als Favorit hinzufügen)
  • share (einen URL verschicken, zum Beispiel über Facebook, Twitter oder als E-Mail)
  • view (ein Dokument anzeigen)
  • new (eine neue Activity definieren, zum Beispiel type: „websms/sms“ definiert Textnachrichten oder „webcontacts/contact“ erstellt einen neuen Kontakt)

Ich kann also mit ein paar Zeilen JavaScript (Listing 7) eine Telefonnummer an das Handy übergeben und der Benutzer braucht dann nur noch den Anruf zu bestätigen.

var call = new MozActivity({
  name: "dial",
  data: {
    number: "+1804100100"
  }
});

Um ein Bild von meinem Smartphone in eine App zu importieren, kann ich Listing 8 ausführen.

var bildholen = new MozActivity({
  name: "pick",
  data: {
    type: ["image/png", "image/jpg", "image/jpeg"]
  }
});
bildholen.onsuccess = function () {     var img = document.createElement("img");
  if (this.result.blob.type.indexOf("image") != -1) {
    img.src = window.URL.createObjectURL(this.result.blob);
    // Das Bild ist nun als img-Element vorhanden
  }
};
bildholen.onerror = function () {       // Fehler
};

 

Abb. 5: Mit Web Activities kann ich dem Endnutzer erlauben, Daten vom Handy in die App zu laden, z. B. Kamerabilder oder gespeicherte Fotos

In diesem Fall kann der Endnutzer ein Bild aus der Galerie oder aus einem Ordner im Desktophintergrund auswählen bzw. ein neues Foto schießen. Firefox OS erkennt die möglichen Quellen der Daten automatisch am Datentyp, der im Skript definiert ist. Mit der record Web Activity (Abb. 5) kann der User direkt zur Kamera-App springen (Listing 9).

var aufnahme = new MozActivity({
  name: "record"
});
aufnahme.onsuccess = function () { 
  var img = document.createElement("img");
  img.src = window.URL.createObjectURL(this.result.blob);
  // Bild ist als img vorhanden
};
aufnahme.onerror = function () { 
  alert("Bild konnte nicht aufgenommen werden");
};

Web Activities sind den Intents bei Android sehr ähnlich. Derzeit unterstützt nur Firefox OS Web Actitivies. Googles eigener Standard, die Web Intents (eine 1:1-Version von Android Intents für das Web) wurde kürzlich aus Chrome entfernt. Web Activities haben damit eine gute Chance, diese Funktionalität auch auf Desktopbrowsern zu übertragen und zum Standard zu werden.


Erste Schritte zur eigenen App

Für Entwickler gibt es mehrere Möglichkeiten, die Apps auszutesten. Um die richtige Darstellung der App zu gewährleisten, genügt es, die App in einem Browser auszuprobieren. Firefox-OS-Geräte fangen bei einer Auflösung von 320 auf 480 Pixeln an. Es ist daher eine gute Idee, mit dieser Größe anzufangen. Im Firefox-Desktopbrowser kann man mittels Tools | Web Developer | Responsive Design View die Oberfläche im Browser selbst verkleinern und auch drehen, ohne dass das Browserfenster geändert werden muss. Zusammen mit den Developer Tools (Tools | Web Developer | Toggle Tools) hat man damit eine Arbeitsumgebung direkt im Browser, die es einem erlaubt, die App zu bauen (Abb. 6).

Abb. 6: Die Firefox Developer Tools erlauben es, eigene Apps in der richtigen Größe anzuzeigen und im Browser zu bearbeiten

Um Firefox OS zu sehen, braucht es auch nicht viel mehr. Der Firefox OS Simulator (Abb. 7) ist ein Add-on für Firefox und läuft auf Mac, Windows und Linux. Man kann den Simulator hier herunterladen und installieren. Der Simulator lässt sich leicht sehen über Tools | Web Developer | Firefox OS Simulator einschalten. Man erhält dann ein simuliertes Handy mit Firefox OS, eine Konsole mit Fehlern und Informationen und die Möglichkeit, Apps von der Festplatte in Firefox OS zu testen. Wenn man Firefox Nightly als Browser verwendet, erhält man die besten Ergebnisse.

 

Abb. 7: Der Firefox OS Simulator erlaubt die Firefox-OS-Simulation auf dem Rechner

Will man eine neue App starten, bietet es sich an, die Boilerplate-App von Robert Nyman als Grundlage zu nehmen. Diese App ist hier erhältlich, passt sich automatisch dem Bildschirm an und zeigt alle möglichen Web Activities bereits als Knöpfe im Interface an. Außerdem kann die App mittels eines Knopfes auch vom Web aus installiert werden ohne im Marketplace angemeldet zu sein.


Erschwingliche Entwicklerhandys

Die spanische Firma Geeksphone verkauft derzeit Entwicklerhandys zu erschwinglichen Preisen im Internet. Wenn man eine App auf der echten Hardware testen will, ist das mit Abstand die beste Möglichkeit.


Das Jahr von Firefox OS

Ganz gleich, wie weit man als Entwickler gehen will – Firefox OS wird dieses Jahr ein wichtiger Schritt zum mobilen World Wide Web sein. HTML5 ist eine offene Technologie, und selbst falls Firefox OS nicht für alle Entwickler interessant sein sollte, so ist es doch ein Meilenstein. HTML5 ist nicht mehr „das hässliche Entlein“, das auf iOS und Android nur langsam läuft. HTML5 wird mit dieser Plattform vielmehr zu einer echten Alternative, um Millionen neue Endverbraucher zu erreichen. Es ist relativ einfach, mit PhoneGap eine HTML5-App als native App auf andere Plattformen zu installieren. Doch ist das der Sinn des Ganzen? Es gibt nicht die eine Plattform, keine „Mozilla-Plattform“ oder eine „Firefox-Plattform“. Das Web ist die Plattform und wir haben eine Reihe von open APIs geschaffen, damit portable Web-Apps außerhalb geschlossener Systeme laufen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -