Comment font-ils cela? - Le site mobile ajouté à l'écran d'accueil apparaît en tant qu'application autonome

Question

Donc, je n'ai vu qu'un seul site Web faire cela et je suis très curieux de savoir comment ils le font. J'utilise un iPhone 4 avec iOS5 en passant. Rendez-vous sur le site http://m.funnyordie.com/ (le site comique de Will Ferrell) sur Safari mobile, ajoutez-le à l'écran d'accueil, puis cliquez sur l'icône de l'écran d'accueil que vous venez d'ajouter.

Le site mobile apparaît sans aucun des boutons ou de la barre d'adresse Safari. Il apparaît même dans la barre d'applications ouverte en tant qu'application autonome ouverte (double-cliquez sur le bouton d'accueil pour voir ce que je veux dire quand Funny or Die n'est pas au premier plan).

Vous pouvez parcourir les vidéos sur la page et même effectuer une recherche, mais lorsque vous cliquez sur l'un des autres onglets (Plus consultés, Exclusions FoD), vous accédez à l'application Safari pour un nouvel onglet.

Je n'ai jamais vu quelqu'un d'autre faire cela et je suis très curieux de savoir comment ils font cela. Quelqu'un sait?

Answer 1

Il est appelé Web Clip et si vous spécifiez des méta-données dans votre code HTML, vous pouvez le faire apparaître sur l'écran d'accueil avec une icône

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Pour ajouter une icône:

<link rel="apple-touch-icon" href="/custom_icon.png"/> 

Pour avoir une image de démarrage:

<link rel="apple-touch-startup-image" href="/startup.png"> 

Pour masquer la barre de navigation:

<meta name="apple-mobile-web-app-capable" content="yes" /> 

Pour modifier la barre d'état appearnace:

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

Answer 2

également des informations, il semble qu'ils utilisent jquery mobile assez fortement (jquerymobile.com) que je pense peut faire beaucoup de tout ça pour toi.