Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 57

Tipp: Es kann nun sogar mit einem bisschen JavaScript und dem standalone -Attribut
des navigator -Objekts überprüft werden, ob die Webseite im Vollbildmodus angezeigt
wird oder nicht:
<script>
if (window.navigator.standalone)
alert('Wir sind im Vollbildmodus');
<script>
Sie können sogar noch etwas weitergehen und Ihren Benutzern einen kleinen Hinweis
darauf geben, dass sie Ihre Web App auf den Home-Bildschirm legen können, um
leichter wieder zur Seite zurückzufinden und diese dann auch im Vollbildmodus zu
sehen. Das folgende Codebeispiel zeigt jeweils eine Meldungsbox, wenn die Anwendung
im Vollbildmodus läuft bzw. wenn nicht:
<script>
if (window.navigator.standalone) {
alert ('Wir sind im Vollbildmodus!')
} else {
alert('Tipp: Legen Sie diese Seite auf Ihren Home Bildschirm. Tippen Sie
auf das Pluszeichen im Safari Browser.')
}
</script>
Natürlich sollten Sie in der Praxis die Meldungsbox für den Vollbildmodus weglassen
und beispielsweise ein CSS-Overlay für die Meldung verwenden, wenn die Webanwen-
dung nicht im Vollbildmodus läuft.
Die Webanwendung fühlt sich bereits viel mehr nach Anwendung an, allerdings gibt es
noch einen großen Unterschied: Nach dem Antippen und Starten einer nativen Anwen-
dung wartet man nicht ein paar Sekunden, bis alle Bildschirmelemente geladen sind.
Typisch für iPhone-Anwendungen ist der sogenannte Startup-Bildschirm, der meistens
so lange eine schön designte Grafik zeigt, bis alle Daten initialisiert und geladen sind.
Mit nur einem weiteren HTML-Tag im head -Bereich der Seite lässt sich das genau so
bei einer Webanwendung integrieren. Sie benötigen dazu wieder eine Grafik bzw.
Bilddatei im PNG-Format, die das Format 320 x 460 oder 640 x 960 Bildpunkte (iPhone 4)
besitzen muss. Wie bei der eben beschriebenen Symboldatei kann das PNG auch in 24-
Bit-Farbtiefe vorliegen. Nennen Sie die Datei beispielsweise splash320x240.png, und
fügen Sie folgendes HTML-Tag in den Code ein:
<link rel "apple touch startup image" href "splash320x240.png" />
Ab sofort wird nach dem Antippen des Symbols auf dem Home-Bildschirm genau diese
Grafik angezeigt und erst nach wenigen Augenblicken entfernt, wenn die komplette
Webseite geladen ist und dargestellt wird.