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!

8 Kommentare

buzzt heman

Hi Gerrit,

meine Kunden fahren alle total auf ein HomeScreen Icon ab, auch wenn ich Ihnen erst mal erklären muss, wie das Ablegen geht. Da muss ich wg. der vielen »sizes« aber gerade mal nachharken. Ist vielleicht ein bisschen offtopic… Meiner Erfahrung nach kann doch einfach nur das fette 152er oder gar ein noch größeres PNG abgelegt werden. Die Devices schrumpel sich das doch dann selber herunter, wie sie es gerade brauchen. Was soll denn immer dieser Aufwand respektive Unsinn(?), hier sogar acht, verschiedene Größen anzubieten?

Besten Gruß
buzzt heman

Guido

@Gerrit: Die Frage aus dem ersten Kommentar hätte ich auch gerne beantwortet, du hast ja sicher genug Apfelkram zum Testen da. Was braucht man wirklich? (Mach doch mal nen Blogpost draus. :-) )

Gerrit

Wahrscheinlich genügt es, die größte Version einzubinden und das iOS-Gerät selber skalieren zu lassen – ich vertraue jedoch der Skalierungsfunktion von Photoshop mehr. Außerdem kann man bei den kleineren Versionen andere Proportionen verwenden für das Motiv.

Paul

Wirkt sich das Chrome-Äquivalent mobile-web-app-capable ebenfalls negativ auf die Performance aus? Eine schnelle Suche ergab leider keine brauchbaren Suchergebnisse.

Für Fav- und Homescreen-Icons usw. kann ich übrigens den Real Favicon Generator empfehlen- der kümmert sich sehr zuverlässig um dieses Thema (und schlägt auch acht verschiedene Dateien vor).

Dominik

Noch ein Tipp: http://theamazingweb.net/2013/12/19/minimal-ui-viewport-meta-tag/

fwolf

bzgl. der Frage, ob nicht EINE Größe des Apple-Touch-Icons ausreicht:
lt. HTML5 Boilerplate: Ja => Is there any need for the 6 different apple-touch icons when just one will work?

Andererseits findet sich dort auch der Kommentar, dass ANDERE Mobil-Browser ebenfalls die Apple-Touch-Icons abrufen – ohne link-Tag, versteht sich. Der Kommentator schreibt aber sonst nichts weiter dazu, und bis dato ist mir auch noch nichts in die Richtung gehend aufgefallen.

Soweit es Apple-Geräte tangiert, dürfte also die Antwort eindeutig lauten: Ja, ein Icon reicht ;)

cu, w0lf.

Florian

Unter iOS 8 hat sich dieses Thema dann auch (endlich) erledigt.
via 9to5mac

Gerrit

Bin mir da nicht so sicher. Der Artikel spricht von »Apps«. Nicht von selfcontained Web-App.

Kommentar verfassen