Meine erste HTML5 native APP

Schon seit längeren sind die Apps ein Thema. Ich selbst habe mich bis dato kaum mit dieser Technik beschäftigt, weil mir der Weg zu einer App viel zu kompliziert erschien . Ich möchte weder lizensierter Apple-Developer werden, noch möchte ich meine Anwendung nur auf einer von Apple kontrollieren Seite anbieten. In mir schlägt das Open-Source Herz.

Bild meine APP aud dem Iphone

Für manche Kunden kann es jedoch aus Marketinggründen sehr reizvoll sein, ihre Apps im App-Store zu präsentieren. In einen solchem Fall gibt es jedoch jede Menge guter App-Entwickler. Mein Steckenpferd ist und bleibt nun mal HTML & Co.

Aus diesen Grunde habe ich Ende letzter Woche beschlossen meine erste HTML5 APP zu basteln. Eigentlich wollte ich erst einmal nur üben. Im Hinterkopf der Gedanke, vielleicht den Joomla-Templates, in einer späteren Version, ihre eigene HTML5-APP mitzugeben.

Aber bevor ich mich auf wilde Experimente einlasse, muss ich mich erst einmal einarbeiten. Ich wusste, da gibt es Möglichkeiten über den LocalStorage und die Manifest-Dateien Inhalte zu cachen und später auf diese im offline-Modus zugreifen. Eine Technik, die mich neugierig gemacht hat. Ich habe im Netz nach interessanten Beispielen umgesehen und fand die thymer-Anwendung von Calvin, auf dessen Basis ich dann meine Joomla Developer App entwickelt habe. Das Ganze ist nicht mehr als ein Experiment und nicht ganz ernst zu nehmen.

Webentwickler sitzen, gerade wenn spannende Aufgaben zu lösen sind, oft stundenlang am Rechner, ohne sich zu bewegen. Abends schmerzt der Rücken und im Laufe der Jahre sammeln sich so einige Pfunde auf den Hüften. Wenn man jedoch alle 2 Stunden aufsteht und nur 3 Minuten hüpft kann das schon sehr helfen. Also meine APP klingelt nach der gewünschten Zeit und erinnert uns daran uns doch ein wenig zu bewegen.

Das Beispiel findet Ihr hier: http://der-auftritt.de/kunden/myfirstapp



Die Technik

Offline verfügbar mit der Manifest-Datei

Zuerst wird eine ganz normale HTML-Seite gebaut, deren Inhalte später auch im Offline-Modus verfügbar sein sollen. Dies geschieht mit Hilfe der Manifest-Datei in der man die hinterlegten Dateien auflistet und diese in den Kopf der HTML Seite einbindet.

<! doctype html>
< html manifest = "angie.manifest" >
....

Beim Anlegen der Datei ist einiges zu beachten.

  1. Sie muss als utf-8 gespeichert werden und darf keine Uniciode-Zeichen enthalten.
  2. Sie muss beginnen mit: CACHE MANIFEST
  3. Für jedes referenzierte Element muss eine neue Zeile angelegt werden.
  4. Sie muss mit dem mine-Type cache /manifest ausgeliefert werden

Der letzte Punkt erfordert ein wenig Aufwand, da die meisten Webserver noch nicht in der Lage sind diesen Mine-Typ auszuliefern. Aus diesem Grunde müssen wir es Ihm beibringen, indem wir einen .htaccess Datei anlegen und dort

AddType text/cache-manifest .manifest

notieren.

Das Ganze ist wenig fehlertolerant. Ich selbst bin kreativ und somit manchmal recht chaotisch. Befindet sich zum Beispiel eine nicht verwendete Datei in dem manifest, arbeitet es nicht wie gewünscht. Wir werden also zur Ordnung gezwungen.

Beispiel:

CACHE MANIFEST
clock_32x32.png
index.html
jquery-1.5.2.min.js
minus_12x3.png
reload_12x14.png

...

Möchte man nun z.B in Firefox kontrollieren ,was tatsächlich im offline cache angekommen ist, ist dies sehr einfach. Man gibt einfach in der Browerleiste

about: cache

ein und erhält eine Auflistung der verschieden Caches inklusive ihrer Inhalte. Löschen lassen sich diese Inhalte über:

Extras->Einstellungen->Erweitert->Netzwerk

Die Metaangaben: Icons für das Iphone hinterlegen und die Darstellung beeinflussen

Auf dem Iphone hat man die Möglichkeit die ausgewählte Seite zu seinem Homescreen hinzufügen. Um dieses Icon in die Seite einzubinden stehen Meta-Angaben zur Verfügung. Das Icon selbst sollte 57x 57 Pixel groß sein und im png –Format vorliegen.

<link rel="apple-touch-icon" href="iphon_icon.png"/>

Zusätzlich haben wir die Möglichkeit ein Startbild festzulegen, dass angezeigt wird nachdem man auf das Home-screen-Icon geklickt hat.

<link rel="apple-touch-startup-image" href="startup.png" />

Die Größe richtet sich nach der verfügbaren Auflösung. In meinen Fallen 320x 460 Pixel.

Fullscreen erzwingen.

Um die Anwendung nach klick im Fullscreen-Modus zu öffnen steht ebenfalls eine Metangabe zur Verfügung.

< meta name = "apple-mobile-web-app-capable" content = "yes"/>

Wobei hier das Attribut content=“yes“ zum gewünschten Ergebnis führt. Eine vollständige Referenz der Metangaben findet man auf

der Seite von Apple

HTML 5 Element <audio> einbinden

Ziel meiner kleinen App ist es , dass nach der eingestellten Zeit der Wecker klingelt und anschließend mein kleiner Webentwickler zu einem heißen Beat hüpft. Als ich begann mich darum zu kümmern ließ sich dies im Firefox schnell realisieren.Die notwendigen Audiofiles wurden einfach über das <audio>-Element eingebunden und im Bedarfsfall mit play() aktiviert. Einziges Problem der Beat sollte in einem Loop laufen. Diese Funktionalität wird vom Firefox leider nicht unterstützt , so dass ich zu Beginn den gleichen Sound mit zwei unterscheidlichen ids eingebunden habe und den einen immer wieder aufgerufen habe, wenn der andere abgelaufen war.

Als ich mir das Ganze dann mit dem Desktop-Safari angesehen habe funktionierte rein gar nichts. Die Inhalte des audio-Elements wurden nicht erkannt. Der Grund hierfür lag darin , dass Safrari das <audio>-Element nur richtig interpretiert, wenn auf dem verwendeten Rechner das Quicktime-Plugin installiert ist.

Tja da blieb mir ja nichts anders übrig .-)

Audio-Sprites

Aber damit waren die Probleme noch nicht zu Ende. Safari hatte so seine Probleme wenn man mehrere Audiofiles einbindet. Egal, was ich versucht habe, es wurde immer nur ein File abgespielt und das andere ignoriert. Dies hat mich auf die Idee gebracht beide Sounds in eine Datei zu basteln und dann einfach in der Zeitleiste hin und her zu springen.

document.getElementById('alarm-sound').play();

/ zurückspulen
document.getElementById('alarm-sound').addEventListener('ended', function(){
this.currentTime = 6.00;
this.pause();
this.play();}, false);

Mit Hilfe der EventListener('ended') ist es möglich zu überprüfen , ob das <audio>-File abgelaufen ist und dann entsprechend zu reagieren.Diese Vorgehen hat gleichzeitig dazugeführt, dass ich auch im Firefox keine Loop-Probleme mehr hatte.

Einziger Wermutstropfen, es kommt zu einer leichten Zeitverzögerung, wodurch der Ablauf des Sounds nicht ganz sauber ist. Für diese Problem habe ich leider noch keine Lösung gefunden. Wenn jemand einen Tipp hat wäre ich dankbar.

Der Test auf dem Iphone: Ernüchternd.

Alles funktioniert, wie gewünscht aber leider ohne Ton. Apple hat, das automatische Abspielen von Sound ohne User-Interaktion auf dem iPhone unterbunden. Begründet wird das damit, dass es ansonsten zu massiven Bandbreitenproblemen kommen kann. Um den User-Event auszulösen habe ich einfach dem Startbutton die Funktion

document.getElementById('alarm-sound').load();

mitgegeben. Und siehe da es funktioniert.

Fazit: So ganz problemlos war das mit meiner ersten APP nicht, aber ich habe eine Menge gelernt. Ob das ganze auch auf dem Android oder dem iPad funktioniert, weiß ich allerdings noch nicht, da ich leider keines besitze. Für Tests wäre ich dankbar.