BigBastis Blog

iPhone Webapp-Links nicht im Safari öffnen

Introduction

user

Sebastian Gross

Sebastian Gross arbeitet in Bielefeld als Softwareentwickler für .NET und Java im Bereich Web.Als Fan der .NET-Plattform lässt er sich kein Userguppen Treffen und Community Event im Raum OWL entgehen.Dabei hat er eine besondere Vorliebe für das ASP.NET MVC Framework und für das Test Driven Development (TDD) entwickelt.


LATEST POSTS

Handling too long scrollspy menus 10th June, 2015

Java: Create ZIP archive 23rd March, 2015

Allgemein

iPhone Webapp-Links nicht im Safari öffnen

Posted on .

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 🙂

profile

Sebastian Gross

http://www.bigbasti.com

Sebastian Gross arbeitet in Bielefeld als Softwareentwickler für .NET und Java im Bereich Web.Als Fan der .NET-Plattform lässt er sich kein Userguppen Treffen und Community Event im Raum OWL entgehen.Dabei hat er eine besondere Vorliebe für das ASP.NET MVC Framework und für das Test Driven Development (TDD) entwickelt.

Comments
user

Author Sven

Posted at 12:15 1. März 2013.

Danke für den Tipp, das werde ich doch gleich einmal ausprobieren.

Kommentar verfassen

View Comments (1) ...
Navigation