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

Question

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

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

Мобильный сайт отображается без каких-либо кнопок Safari или адресной строки. Он даже отображается в открытом трее приложений как открытое автономное приложение (дважды нажмите кнопку «Домой», чтобы увидеть, что я имею в виду, когда «Забавно» или «Умереть» не на переднем плане).

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

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

Answer 1

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

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

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

<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" />

Answer 2

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