Настройка веб-приложений для Android

У веб-приложений iPhone есть четыре функции конфигурации (не включая кеш-приложение HTML5) для настройки поведения веб-страниц при сохранении веб-страницы на главном экране в качестве закладки.

Вы можете указать значок домашней страницы.
Вы можете указать загрузочный образ, который отображается при загрузке веб-страницы.
Вы можете скрыть пользовательский интерфейс браузера.
Вы можете изменить цвет строки состояния.

Четыре функции работают путем добавления тегов в <head> например:

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

Естественно, ни один из этих тегов "apple-" ничего не делает в Android. Но есть ли способ сделать что-то эквивалентное? [Как минимум, я хочу, чтобы пользователи могли добавлять мою веб-страницу на свой домашний экран Android (например, в Android 2.0) и иметь довольно приветственный значок.]

Ответ 1

Это датированный вопрос, поэтому ответ изменился. Chrome для новых андроидов имеет для этого собственные метатеги. Убедитесь, что вы добавили на Homescreen, и запустите с главного экрана. Нормальной закладки недостаточно. В настоящее время Chrome использует несколько директив Apple, но три внизу - магия android.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">

Ответ 2

Когда вы создаете ярлык на главном экране для закладки, Android будет использовать apple-touch-icon-precomposed, если он присутствует (но не apple-touch-icon), как значок с высоким разрешением:

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

Что касается остальных функций, я не думаю, что есть какой-либо способ сделать это в настоящее время, не публикуя приложение для Android, которое действует как обертка для вашего сайта.

Ответ 3

Это может представлять интерес для читателей:

http://code.google.com/p/android/issues/detail?id=7657

В 2.1-update1, на Droid, и я предполагаю, что другие 2. * телефоны OS при добавлении закладки на рабочий стол, на главном экране отображается только пользовательский значок, если ссылка rel= "apple-touch-icon" или apple-touch-icon-precomposed имеют полный URL-адрес.

Ответ 4

Я пробовал это из своей Samsung Galaxy S1

Не работает для меня... но что работа сначала создавала закладку, а затем добавляла эту закладку как ярлык для моего дома. Это вызвало правильный значок, который будет использоваться.

Ответ 5

Существуют различные метаэлементы, которые мы можем использовать для достижения наилучших результатов:

1a) Прежде всего нам нужно установить окно просмотра для нашего приложения так:
<meta name="viewport" content="width=device-width, initial-scale=1">

1b) Здесь есть немного взлома, для устройств с более высокими экранами (например, iPhone 5):
<meta name="viewport" content="initial-scale=1.0">
Просто поставьте его под другую мета и он будет делать всю магию.

2) Теперь, когда у нас есть основы, мы скажем мобильным браузерам "читать" наш сайт, как если бы это было приложение. Есть два основных мета-элемента:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Это позволит открыть наш веб-сайт в полноэкранном режиме и создать стандартную строку состояния.

3) Мы закончили с "ведящими" мета элементами, теперь давайте начнем с наших значков. Количество значков и строк кода будет полностью зависеть от вас. Для загрузочного образа я предпочел создать один значок для каждого разрешения, чтобы мой "загрузчик" действовал одинаково на всех устройствах (в основном, на устройствах Apple). Вот как я это сделал:

*<!--iPhone 3GS, 2011 iPod Touc-->* <br>
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br>

*<!--iPhone 4, 4S and 2011 iPod Touch-->* <br>
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">` <br>

*<!--iPhone 5 and 2012 iPod Touch-->* <br>
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">` <br>

*<!--iPad landscape-->* <br>
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"> <br>

*<!--iPad Portrait-->* <br>
`<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">` <br> <br>

ПРИМЕЧАНИЕ. Формат должен быть PNG, и все размеры должны соблюдаться, иначе это не сработает.

4) Чтобы закончить, нам также понадобятся некоторые иконки для нашего приложения. Этот значок будет отображаться в меню устройств. Вот как я это сделал:

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br>
`<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br>

*<!--1st generation iPad, iPad 2 and iPad mini-->* <br>
`<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br>

*<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br>
`<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br>

*<!--iPad 3rd and 4th generation-->* <br>
`<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br>

ПРИМЕЧАНИЕ. Вы также можете использовать "precomposed" для того, чтобы ваш значок не отображался с отражающим блеском iOS. Просто добавьте это слово, где вы определяете rel так:
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

Как сказано, это лучше работает на устройствах Apple. Но значок приложения был подтвержден на устройствах Android, и он работает.