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

Dieser Beitrag wurde unter Apps programmieren abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

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

  1. Georg sagt:

    Hallo!
    Hab jetzt meine App mit diesem Full Screen Mode programmiert. Problem dabei ist, dass untergeordnete HTML Seiten dann in den Browser wechseln… Gibt´s da eine andere Möglichkeit?

  2. Matthias sagt:

    Hallo zusammen,

    bekomme die Ajax-Links irgendwie nicht ans laufen. Habe es nun wie folgt eingebaut:

        if ( $(window).width() < 960) {
           function hijack() {
             $("#page-wrapper a").click(function(e){
                  e.preventDefault();
                  loadPage(e.target.href);
                  })
             }
           function loadPage(url){
             $("#page-wrapper").load(url + "#page-wrapper", hijack);
          }
        }
        else {
           // nothing
        }

    Aber es scheint nicht zu klappen! Was machen ich falsch?? Danke und Grüße!

  3. HA! – genau DAS habe ich gerade gesucht… Danke!!!

  4. Pierre sagt:

    Ja ich habe da ein Problem, ich habe versucht das einzubinden.
    Beim Script habe ich das folgender maßen gemacht (befindet sich zwischen und :

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

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

    und beim anklicken der url habe ich das so:

    Project-eSp

    aber irgendwie will das nicht so wie ich es gerne hätte, er macht nämlich Garnichts….

    vielleicht kann mir jemand sagenw as ich falsch mache.

    Vielen Dank schonmal dafür :)

    Gruß
    Pierre

  5. Pierre sagt:

    Ja ich habe da ein Problem, ich habe versucht das einzubinden. Irgendwie will das nicht so wie ich es gerne hätte, er macht nämlich Garnichts….

    vielleicht kann mir jemand sagen, was ich falsch mache.

    Vielen Dank schonmal dafür

    Gruß
    Pierre

    • admin sagt:

      Ich würde vermuten, dass du jquery nicht eingebunden hast. Schau mal unter jquery Download, lade dir die aktuelle Version herunter und binde das als externes JavaScript ein.
      Du kannst beim Laden deiner Seite auch in die Fehlerkonsole schauen (z.B. bei Firefox durch STRG+SHIFT+J zu öffnen) – dort sollte der Fehler angezeigt werden,d ass $(… nicht deklariert ist, wenn jQuery fehlt.

  6. Rocco sagt:

    Eine kleine Korrektur: das Meta-Tag „apple-mobile-web-app-status-bar-style“ bewirkt nicht, „dass die Statusbar nicht mehr dargestellt wird“, sondern nur, dass diese schwarz hinterlegt wird. Andere zulässige Parameter sind hier neben dem angegebenem „black“: auch „default“ oder „black-translucent“. Bei „black-translucent“ kann der Bereich der App den gesamten Bildschirm einnehmen, also auch den Bereich hinter/unter der Statusbar.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *