6. App Programmierung mit HTML5 – Meta Tags für Full Screen Mode

In den bisherigen Kapiteln haben wir gelernt, wie man eine Website so gestaltet, dass der Inhalt im Browser wie eine native App aussieht.
Jetzt machen wir einen großen Schritt nach vorne, indem wir den lästigen Overhead des Browsers in Form der Adresszeile und die Statusbar verschwinden lasssen. Damit gewinnt unsere HTML5 Web App deutlich mehr Platz und ist von ablenkendem Ballast befreit.

Web App in Full Screen Mode

Um den Full Screen Mode für die Web App zu aktivieren und die Statuszeile auszublenden sind lediglich zwei Meta Tags notwendig, die im Headbereich eingebaut werden:

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Der erste Metatag bewirkt, dass die Tabs und die Adresszeile am oberen Bildschirmrand verschwinden und die zweite, dass die Statusbar nicht mehr dargestellt wird. Damit sieht unsere Web App jetzt einer nativen App schon zum verwechseln ähnlich.
Hinweis: Die Einstellung ist nur wirksam, wenn die WebApp vom Homescreen aus gestartet wird, also die Website vorher als Favorit gespeichert wurde. Öffnet man Safari und surft die Website an, bleiben die Steuerelemente erhalten.

Neue Seite öffnen

Die letzte Hürde, die auf dem Weg zu einem perfekten „native-look“ besteht ist, dass beim Anklicken eines Links dieser wieder eine Seite mit dem lästigen Browserkopf öffnet. Die Lösung: alle Links sollten per event handler verarbeitet werden und neue Seiten per AJAX gelden werden. Das entspricht auch dem „native-feel“ einer App eher, als der Aufbau einer neuen Seite.
Hier der Code zum Link-Hijacking per jQuery

   function hijack() {
     $('#viewport a').click(function(e){
          e.preventDefault();
          loadPage(e.target.href);
          })
     }

Damit wird im Bereich mit der id „viewport“ jeder link zunächst per e.preventDefault NICHT geöffnet. Danach wird die Funktion loadPage aufgerufen, die so aussehen könnte:

function loadPage(url){
   $('#viewport').load(url + '#viewport', hijack);
}

Weiter mit Icon für den Homescreen