Tutorial: iPhone Web-Apps im Vollbild verwenden

Passend zu meiner kürzlichen Vorstellung der Youtube Web-App bin ich nun auf ein Bookmarklet gestoßen, mit dem man Web-App als eigenständige App im Vollbild vom Homescreen starten und verwenden kann. Beim einfachen speichern des Lesezeichens auf dem Homescreen besteht nämlich das Problem, dass dies immer im Safari gestartet wird und auch dort bleibt, bis man die Seite mal schließt. Zudem kann die Web-App dann im Falle von Youtube auch nicht mit den iOS4 iPod-Bedienelementen ferngesteuert werden (siehe Screenshots). 

Nun, wie legt man nun die Web-App richtig als eigenständigen Clip ab? Zunächst brauchen wir das Bookmarklet, welches wir im Safari ablegen müssen.

Hier nun erst einmal das Bookmarklet:

javascript:var%20meta=document.createElement(%22meta%22);meta.name=%22apple-mobile-web-app-capable%22;meta.content=%22yes%22;document.getElementsByTagName(%22head%22)
.item(0).appendChild(meta);alert(%22Vollbild%20aktiviert%22);

Es gibt zwei Wege, dies auf euer iPhone zu bringen. Per Synchronisation oder direkt auf dem iPhone als Lesezeichen abspeichern.

per Sync mit dem Rechner: Die einfachste Variante ist, ein neues Lesezeichen im Safari auf dem Mac anzulegen und das Bookmarklet als Adresse hinein zu kopieren. Dann synchronisiert ihr mit eurem iPhone, um das Lesezeichen im Mobile Safari zu haben.

direkt auf dem iPhone als Lesezeichen anlegen: Erstelle einfach ein Lesezeichen von irgendeiner Seite im Mobile Safari. Kopiere das Bookmarklet und bearbeite das neu angelegte Lesezeichen. Füge bei der Adresse das Bookmarklet ein. Fertig.

So, wenn wir nun das Bookmarklet im Safari haben, können wir loslegen. Hier das Beispiel Youtube Web-App:

  • Youtube im Mobile Safari aufrufen: m.youtube.com
  • Bookmarklet anklicken und Info-Meldung bestätigen
  • jetzt “+” klicken und Youtube als Webclip auf dem Homescreen speichern

Nun startet Youtube im Vollbild als eigenständnige App. Das Ganze funktioniert auch mit anderen Web-Apps oder für das iPhone angepasste Webseiten.