¿Cómo lo hacen? El sitio móvil agregado a la pantalla de inicio aparece como aplicación independiente

Question

Así que solo he visto un sitio web hacer esto y tengo mucha curiosidad de saber cómo lo hacen. Estoy usando un iPhone 4 con iOS5 por cierto.

Vaya a http://m.funnyordie.com/ (sitio de comedia de bocetos de Will Ferrell) en el Safari móvil, agréguelo a la pantalla de inicio y luego haga clic en el icono de la pantalla de inicio que acaba de agregar.

El sitio móvil aparece sin ninguno de los botones de Safari o la barra de direcciones. Incluso se muestra en la bandeja de aplicaciones abierta como una aplicación independiente abierta (pulse dos veces en el botón de inicio para ver a qué me refiero cuando Funny o Die no está en primer plano).

Puede navegar por los videos en la página e incluso buscarlos, pero cuando hace clic en una de las otras pestañas (Más vistos, Exclusivas de FoD), lo lleva a la aplicación Safari para obtener una nueva pestaña.

Nunca he visto a nadie más hacer esto y tengo mucha curiosidad de saber cómo lo hacen. ¿Nadie sabe?

Answer 1

Se llama un clip Web y si especifica algunos metadatos en el código HTML que puede hacer que aparezca en la pantalla de inicio con un icono

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

Para añadir un icono:

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

Para tener una imagen de inicio:

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

Para ocultar la barra de navegación:

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

Para cambiar el appearnace barra de estado:

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

Answer 2

también para obtener información que parece que están usando jquery mobile muy fuertemente (jquerymobile.com) que creo que puede hacer mucho de todo eso para ti.