iOS bietet euch eine nette Funktion mit der ihr Webseiten als Verknüpfung auf eurem Homescreen ablegen könnt. Wenn ihr eure Seite darauf noch etwas vorbereitet, könnt ihr sogar euer eigenes Logo hinterlegen und auch die Webseite später im Fullscreen Modus laufen lassen.

Dazu müsst ihr lediglich ein paar Ressourcen hinterlegen:

    <!-- Setzen der Icons für die verschiedenen Auflösungen -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/Content/grafik/icons/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/Content/grafik/icons/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/Content/grafik/icons/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/Content/grafik/icons/apple-touch-icon-57-precomposed.png">
    <!-- sorgt dafür dass die App im Vollbild ausgeführt wird -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Farbe der Statuszeile -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

Safari erkennt dann diese Tags und zeigt euer Icon und führt die Seite dann auch im Vollbildmodus aus. Ein weiteres Goodie ist, dass die Webseite als „App“ läuft und im Taskmanager sogar ein eigenes Icon bekommt.

Hier am Beispiel meiner kleinen F1-Tippspiel Seite:

Diese Diashow benötigt JavaScript.

Der Haken
Ein kleines Problem bleibt dann aber noch. Sobald ihr einen Link auf die Seite setzt und der Benutzer diesen antippt wird der Link ein einer neuen Safari Instanz geöffnet. Das Liegt daran, dass iOS euere Seite als App betrachtet und alle Links werden in iOS vom Safari behandelt.

Zum Glück kann man dieses Verhalten sehr einfach mit etwas Javascript umgehen:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Weitere Infos und Quelle zu der Lösung findet ihr bei Stackoverflow.

Nun werden alle Links in eurer „App“ geöffnet und alles funktioniert wie gewohnt 🙂