Как они это делают - мобильный сайт, добавленный в Homescreen, появляется как автономное приложение

Итак, я видел только один сайт, и мне очень любопытно узнать, как они это делают. Кстати, я использую iPhone 4 с iOS5.

Перейдите на http://m.funnyordie.com/ (нарисуйте сайт комедии Уилла Феррелла) на мобильном Safari, добавьте его на рабочий стол, а затем щелкните значок рабочего стола, который был добавлен.

Мобильный сайт отображается без кнопок Safari или адресной строки. Он даже появляется в открытом лотке для приложений в качестве открытого автономного приложения (двойная вкладка домашней кнопки, чтобы увидеть, что я имею в виду, когда Funny или Die не находится на переднем плане).

Вы можете перемещаться по видео на странице и даже выполнять поиск, но когда вы нажимаете одну из других вкладок (Most Viewed, FoD Exclusives), вы попадаете в приложение Safari для новой вкладки.

Я никогда не видел, чтобы кто-то еще это делал, и мне очень любопытно узнать, как они это делают. Кто-нибудь знает?

Ответы

Ответ 1

Он называется Веб-клип, и если вы укажете некоторые метаданные в своем html, вы можете отобразить его на главном экране со значком

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

Чтобы добавить значок:

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

Чтобы иметь загрузочное изображение:

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

Чтобы скрыть панель навигации:

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

Чтобы изменить строку состояния, появится следующее:

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

Ответ 2

Также для информации кажется, что они довольно сильно используют jQueryMobile (jquerymobile.com), который, как я думаю, может многое сделать для вас.