XML-Ecke

Web App im Firefox OS Simulator

Für Apps mit hohen Anforderungen an die Prozessorleistung sind die nativen Apps für ein bestimmtes mobiles Betriebssystem zurzeit noch deutlich leistungsfähiger. Viele Apps aber bereiten lediglich Informationen für die Nutzung auf mobilen Geräten auf – Informationen, wie sie von Websites bislang meist für die Verwendung im Browser und auf Desktop-Geräten bereitgestellt werden. Solche Angebote lassen sich sinnvoll auch als Web-App bereitstellen. Der Vorteil gegenüber der Darstellung im mobilen Browser: Die App kann direkt auf Smartphone-Funktionen wie Kamera oder Geolokalisierung zugreifen und für die Anwendung nutzbar machen.

Das Mozilla-Projekt hat einen relativ einfachen Workflow für die Entwicklung von Web Apps eingerichtet. Eine zentrale Rolle spielt dabei eine einfache JSON-Datei – das Datenaustauschformat der JavaScript Object Notation stellt ähnlich wie XML strukturierte Daten für die Nutzung von Webanwendungen bereit. Bei einer Web-App heißt das App Manifest. Diese JSON-Datei wird mit der Endung .webapp abgespeichert und enthält einige zentrale Daten der App:

{
  "name": "meine App",
  "description": "bei meiner App geht es um das hier...",
  "launch_path": "/index.html",
  "icons": {
    "60": "/images/icon-60.png",
    "64": "/images/icon-64.png",
    "128": "/images/icon-128.png"
  },
  "developer": {
    "name": "mein name",
    "url": "http://meine_website.de"
  },
  "default_locale": "de"
}

Wichtig ist der vollständige Pfad zur Datei mit dem Einstieg zu den Inhalten der Web-Anwendung – es genügt nicht, hier nur das Root-Verzeichnis anzugeben, wie es im Mozilla-Dokument zum Web Manifest angegeben ist.

Das App Manifest von Mozilla ähnelt dem Manifest der Google Extensions, das ebenfalls elementare Daten einer Webanwendung im JSON-Format festhält. Wünschenswert wäre da eine baldige Standardisierung.

Das App Manifest wird auf den Server hochgeladen, ins gleiche Verzeichnis, in dem auch die Daten der Website liegen. Da das App Manifest im Root-Verzeichnis der Website liegt, kann angenommen werden, dass beide vom gleichen Web-Entwickler stammen, was die Sicherheit erhöhen soll. Die App will mit einem Icon auf dem Smartphone-Desktop gestartet werden – mit Blick auf unterschiedliche Systeme kann man hier png-Bildchen in verschiedenen Auflösungen gestalten und im Web Manifest angeben. Eine Anleitung dazu gibt es auch von Mozilla.

Schließlich muss auf dem Server noch eine .htaccess-Datei erstellt oder ergänzt werden, damit der Browser weiß, was er mit dieser merkwürdigen Datei mit der Endung webapp anfangen soll:

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

Nun kann das App Manifest in einem Validator überprüft werden. Wenn bei dieser Prüfung keine Fehler beanstandet werden, ist die Entwicklung der Web App theoretisch schon abgeschlossen:

Der Firefox OS Validator testet das Web Manifest

Die Web-App soll ähnlich wie eine native App bedient werden, also auf dem mobilen Gerät nicht im Browser-Fenster erscheinen, sondern als eigenständige Anwendung. Dafür sorgt die Web Runtime von Mozilla. Die Funktionen dieser API können entweder in den HTML-Code der beim Start aufgerufenen Webseite eingefügt werden – oder der Web-Designer überlässt das einer Plattform wie Github oder dem Firefox Marketplace. Die Web Runtime installiert das Icon auf den Desktop des Betriebssystems, startet von dort aus die App in einem rahmenlosen Fenster und sorgt dafür, dass Hardware-Funktionen wie die Kamera von der App adressiert werden können. Die Web Runtime ist Bestandteil der Browser-Rendering-Technik Gecko und soll in einer künftigen Version des Firefox-Browsers mit integriert werden.

Damit die App auf Funktionen des Smartphones zugreifen kann, hat Mozilla eine WebAPI bereitgestellt: Dazu gehören eine Vielzahl von JavaScript-Funktionen wie der Zugriff auf Uhrzeit, Geolokalisierung oder Kontakte. Für die volle Einbindung der App ins Smartphone gibt es außerdem die WebActivities – hier fordert die App vom Anwender eine Entscheidung zur ergänzenden Nutzung einer anderen App. Zum Beispiel will die WebActivity “pick” ein Foto haben – der Anwender kann nun entscheiden, ob er ein Foto aus der Sammlung gespeicherter Bilder nimmt oder mit der Kamera ein neues Foto aufnimmt. Um etwa die Geodaten vom Smartphone auszulesen, ruft eine JavaScript-Anweisung die Methode getCurrentPosition() auf, was nur wenige Codezeilen erfordert:

var geolocation = document.querySelector("#geolocation"),
            geolocationDisplay = document.querySelector("#geolocation-display");
        if (geolocation && geolocationDisplay) {
            geolocation.onclick = function () {
                navigator.geolocation.getCurrentPosition(function (position) {
                    geolocationDisplay.innerHTML = "<strong>Latitude:</strong> " + position.coords.latitude + ", <strong>Longitude:</strong> " + position.coords.longitude;
                    geolocationDisplay.style.display = "block";
                },
                function (position) {
                    geolocationDisplay.innerHTML = "Failed to get your current location";
                    geolocationDisplay.style.display = "block";
                });
            };
        }

Für die Offline-Nutzung einer Web App kann ein AppCache in die index.html eingebunden werden. Ein Cache Manifest listet die URLs der Dateien auf, die offline bereitgestellt werden sollen. Diese Technik nutzt die Fähigkeiten von HTML5 für das Application Caching.

Das Verhalten der App im Firefox OS von Mozilla kann man im Firefox-Browser mit Hilfe eines Simulators testen. Dieses virtuelle Firefox-Smartphone muss zunächst mit der Maus “entriegelt” werden: Dazu schiebt man den Pfeil nach oben und klickt dann rechts auf das Schloss-Symbol. Mit gedrückter Maustaste kann man nun zwischen den verschiedenen Desktops hin und her blättern und einige der installierten Apps starten. Wenn man dem Simulator die URL der Datei mit dem Web Manifest mitgeteilt hat, wird auch diese App installiert und kann nun in ihrem Verhalten getestet werden.

Dabei zeigt sich, dass der Weg von der Website zur Web App in der Praxis doch etwas länger ist als zunächst gedacht. Beim Versuch, meine mit Joomla 2.5 gestaltete Website www.miramis.de zur App zu machen, zeigt sich, dass sich diese nicht automatisch an das mobile Display anpasst – obwohl ich dafür ein responsives Template nutze. Auf einem iPhone oder einem Android-Smartphone wird so dafür gesorgt, dass die Darstellung der Joomla-Website optimal an das mobile Display angepasst wird. Dieselbe Website in Verbindung mit einem Web Manifest wird im Firefox OS Simulator aber in der großen Desktop-Auflösung dargestellt. Hier ist also die Nutzung eines mobilen Frameworks wie JQuery mobile der sinnvollere Weg – wie das dann im Firefox OS Simulator aussieht, zeigt der Screenshot ganz oben.

Mit JQuery mobile entwickelte Web-Anwendungen unterstützen denn auch die ganze Vielfalt von mobilen Plattformen – von Android über iOS bis Blackberry 10 und Windows Phone. Eine Web App für Firefox OS aber kann das Versprechen einer plattformübergreifenden Nutzung bislang noch nicht einlösen: Sie kann zurzeit nur mit Firefox OS, mit dem Firefox-Browser für Android und mit Firefox-Testversionen Nightly und Aurora gestartet werden. Der Ansatz von Mozilla ist interessant und zukunftsfähig. So hoffe ich, dass er in diesem Jahr zügig weiterentwickelt wird – in Richtung Standardisierung beim Web Manifest und in Richtung einer breiten Plattformunterstützung im Sinne eines rundum offenen Webs.