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.

Weitere Screenshots und/oder ein Video werde ich diesem Beitrag noch hinzufügen…

Katergorie: iOS Tipps, iPhone, Web Tags: , , , , , .

Tom

about me: love apple | social networker | founder of .mactomster | vapor | like motorsport and audi

7 Comments

  1. Danke für den Tipp, funktioniert.

    Nur ein kleines unschönes Problem. Auf dem iPhone 4 erscheint das Homescreen Icon nach deiner Anleitung total verpixelt. Nicht mal der Umriss des Icons (der sonst bei allen Icons scharf ist) erscheint scharf… Liegt das an dem Bookmarklet oder geht es einfach nicht anders?

    • Das liegt am vom Seitenbetreiber bereitgestellten Touch-Icon (ähnlich Favicon). Ist dies zu klein, wird es natürlich verpixelt auf dem Retina-Display dargestellt. Mit dem Bookmarklet hat das nix zu tun.

  2. Das ist mir klar. Aber wenn ich bspw. die YouTube-Seite ohne das Bookmarklet benutzt zu haben abspeichere, wird das Icon scharf. Nutze ich das Bookmarklet vorher, wird es verpixelt.

  3. Habs so gemacht wie beschrieben, aber…

    1. sieht YT bei mir anders aus als bei dir im obigen pic.
    2. öffnet sich immer noch die YT-App auf dem iPhone

    Wo ist eigentlich der Vorteil?
    Schliesslich öffnet sich doch die YT-App auf dem iPhone und dann hast du Vollbild.

Kommentar verfassen