Ja, es gibt sie noch. Mittlerweile gibt es natürlich zuhauf iPhone-Apps (also richtige Programme), aber vereinzelt gibt es auch noch die kleinen Webseiten, die entweder nur eine oder eine spezielle iPhone-Version anbieten. So auch Glyphboard. Damit lassen sich sehr spezielle Sonderzeichen kopieren – iPhone OS 3.0 kann ja Copy ’n’ Paste – und überall einfügen. Da das ganze mit HTML5 gecached wird, ist es sogar offline verfügbar.
Technisch gesehen ist es nun deswegen interessant, weil man die Webapp nur auf dem Homescreen ablegen muss. Danach öffnet sich das Programm plötzlich anders; ohne Url-Zeile, mit eigener Überschrift und Informationsbutton. Huch? Und das soll der Safari sein?
Tja, dokumentiert sind sie.. wusste ich aber noch nicht. Die Seite hat eine Reihe von interessanten Meta-Tags sowie Javascript-Zeilen.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1; user-scalable=0;" />
Das ist nicht neu; damit stellt man die Größe, Skalierung und mögliche Zoomrate (durch den User) ein. Dabei ist 320 die gängige Größe, ist dies doch die native Größe.
<meta name="apple-mobile-web-app-capable" content="yes" />
Die Anwendung wird im Fullscreen (eigentlich ja witzreich, dass beim iPhone so zu nennen) gestartet, Konsequenz ist: Keine Titelleiste, keine Url-Leiste, keine Suche. Diesen auch Standalone genannten Modus wird im DOM unter window.navigator.standalone hinterlegt.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Verändert die Hintergrundfarbe des Statusbalken (der Balken ganz oben); es hat den einzigen Zweck, dass der Balken mit der restlichen Anwendung farblich harmonisch sein soll, deshalb muss dafür der Standalone-Modus aktiv sein.
<link rel="apple-touch-icon" href="app-icon.png" />
Damit definiert man das eigentliche App-Logo. Nun ja, das war ja auch irgendwie klar? Es wird nahegelegt, das Icon apple-touch-icon.png zu nennen, denn dann sucht Safari automatisch danach. Ein Suffix -precomposed im Namen verhindert eventuelle Effekte.
<link rel="apple-touch-startup-image" href="default.png" />
Definiert, was während des Ladens angezeigt werden soll. Falls nicht angegeben, wird der letzte Screenshot der Seite verwendet.
Auch interessant:
-webkit-transform: translateY(460px);
-webkit-transition: -webkit-transform .3s ease-in-out;
Damit wird eine sehr effektvolle Slide-Animation ausgeführt. Wow. Kein Stückchen Javascript.
Dagegen sieht der obligatorische Browsercheck
Ist dies ein iPhone?
if (navigator.appVersion.indexOf('iPhone OS ') < 0)
Ist dies ein iPhone OS 3.0?
if (parseInt(navigator.appVersion.substring(navigator.appVersion.indexOf('iPhone OS ') + 10, navigator.appVersion.indexOf('iPhone OS ') + 11)) < 3)
Ist dies eine Standalone-Anwendung (s.o.)?
if (!window.navigator.standalone)
schon irgendwie langweilig aus, oder?