praegnanz.de büro für intervernetzte medien

Gerrit, 17.03.2014

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

  1. buzzt heman am 17. März 2014 #

    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

  2. Guido am 17. März 2014 #

    @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. :-) )

  3. Gerrit am 18. März 2014 #

    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.

  4. Paul am 19. März 2014 #

    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).

  5. Dominik am 20. März 2014 #

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

  6. fwolf am 22. März 2014 #

    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.

  7. Florian am 18. Juni 2014 #

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

  8. Gerrit am 18. Juni 2014 #

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

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.