Offline, mit Icon und im Vollbild: Tipps für den Entwurf eigener Web-Applikationen

Zwar stehen interessierten Web-Entwickler bereits zahlreiche, komplett kostenlose Frameworks für die Programmierung eigener, iPhone-kompatibler Web-Applikationen zur Verfügung. Stellenweise bieten die Pakete (wie JQtouch oder Webapp-Net, um nur die beiden populärsten zu nennen) jedoch einen wesentlich größeren Funktionsumpfang, als vom Projekt benötigt. Hier helfen eine Hand voll Links und ein einfacher Texteditor. Denn: Gerade kleinere Web-Applikationen können problemlos auf die Integration eines umfangreichen Frameworks verzichten. Hier lassen sich Ladezeiten reduzieren – auf die Einarbeitung in fremden Code kann vollständig verzichtet werden.

Worauf wollen wir hinaus? Ein Beispiel:
Für den Einsatz unterwegs, haben wir eine iPhone-kompatible Version des MB-Spiels Wort-Tüftel gesucht. Aus zufällig gewürfelten Buchstaben, müssen hier mindestens vier Zeichen lange Wörter gebildet werden. Für jedes Wort gibt es einen Punkt. Doppelte Worte und Eigennamen zählen nicht. Nach der erfolglosen AppStore-Suche, bot sich der schnelle Entwurf einer Web-Applikation an. Und damit kommen wir zu den oben angekündigten Links.

Bildschirm-Ausrichtung, Zoom-Stufen und Co.: Hier von Apple beschrieben, erlaubt der HTML-Tag „Viewport“ das Setzen einer Hand voll Grundeinstellungen. Wie breit soll die Web-Applikation beim ersten Aufruf dargestellt werden? Darf der Besucher zoomen? Soll die Web-Applikation einen bestimmten Bereich bereits vergrößert darstellen? Der Support-Artikel „Configuring the Viewport“ klärt auf.

Unterstützung für den Vollbild-Modus: Ebenfalls von Apple definiert, lässt sich mit dem HTML-Tag „apple-mobile-web-app-capable“ festlegen, ob die Web-Anwendung auch im Vollbild, also ohne die MobileSafari-Adresszeile und ohne die sonst angezeigten Bedienelemete des Browsers, arbeiten können soll. Bradkellett erklärt den richtigen Einsatz des Tags in seinem Blog – Ajaxian die zusätzlich verfügbaren Optionen. Entscheidet man sich für den Vollbildmodus, muss die Applikation als Web-Clip auf dem Homescreen abgelegt werden um diesen auch zuzulassen.

Das richtige Icon: Soll die auf dem Homescreen abgelegte Web-Applikation mit einem eigenen Icon ausgestattet werden, hilft auch hier das passende HTML-Tag bzw. ein richtig benanntes Bild. Liegt eine „apple-touch-icon.png“-benannte Grafik-Datei im Root-Verzeichnis des Web-Servers greift das iPhone automatisch darauf zu und benutzt das Bild als Icon. Alternativ lässt sich das zu verwendende Icon im Quelltext der Web-Applikation definieren. allinthehead beschreibt beide Möglichkeiten.

OnTouch statt OnClick: Wer mit Javascript arbeitet – der intelligente Kern fast aller Web-Applikationen – sollte sich die auf cubiq.org abgelegten Ausführungen zum OnTouch-Event durchlesen. Das Javascript-Ereignis kann Verzögerungen bei der Interaktion mit der Web-Applikation ausmerzen und lässt sich relative einfach implementieren

Auch offline verfügbar: Bis zu 5MB an Daten lassen sich auf dem iPhone ablegen und ermöglichen euren Web-Applikationen, so auch im Flugmodus weiter zu arbeiten. Eine „Cache Manifest“ genannte Text-Datei definiert hier, welche Dateien auf dem iPhone gespeichert werden sollen und lässt sich sowohl dynamisch als auch von Hand erstellen. Richtig gute Anleitungen zum Thema gibt es bei thecssninja und auf kentbrewster.com.

Sicher. Unsere Tipps kratzen bislang nur an der Oberfläche und sind weit entfernt von Web-Applikationen wie Pie Guy– für die auch offline einsatzbereite Wort-Tüftel Applikation, hat es jedoch gereicht. Empfehlenswerte Links, sind in den Kommentaren gern gesehen.