Vorsicht mit »Add to Homescreen«

Aus aktuellem Anlass – mehrere unterschiedliche Canvas-basierte Spielentwicklungen hier in unserer Bürogemeinschaft – sei an dieser Stelle daran erinnert, dass es einen signifikanten Unterschied macht, ob man unter iOS 7(.1) eine Webapp im regulären MobileSafari laufen lässt, oder ob man sich dieselbe Webapp als selfcontained App auf dem Homescreen ablegt.

Nach wie vor zieht es Apple vor, die Performance von selfcontained Webapps zu drosseln. Insbesondere bei Canvas-basierten Spielen merkt man deutlich, dass es ruckelt, bis hin zur Unspielbarkeit.

Mein Rat: Trotzdem hübsche Icons erstellen und einbinden, trotzdem einen feinen Titel vergeben, aber die Capability auf »no« setzen:

<meta name="apple-mobile-web-app-title" content="MeinSpiel" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="no" />
<link href="path/to/icon-152x152.png" sizes="152x152" rel="apple-touch-icon" />
<link href="path/to/icon-144x144.png" sizes="144x144" rel="apple-touch-icon" />
<link href="path/to/icon-120x120.png" sizes="120x120" rel="apple-touch-icon" />
<link href="path/to/icon-114x114.png" sizes="114x114" rel="apple-touch-icon" />
<link href="path/to/icon-76x76.png"   sizes="76x76"   rel="apple-touch-icon" />
<link href="path/to/icon-72x72.png"   sizes="72x72"   rel="apple-touch-icon" />
<link href="path/to/icon-60x60.png"   sizes="60x60"   rel="apple-touch-icon" />
<link href="path/to/icon-57x57.png"   sizes="57x57"   rel="apple-touch-icon" />

Somit öffnet sich einfach ein neuer Tab im normalen Mobile Safari, wenn man auf das Icon im Homescreen tippt. Hat außerdem den Vorteil, dass externe Links auf eine vernünftige Weise behandelt werden können (siehe hier). Happy HTML5-Game-Developing!