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

Question

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

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

Четыре функции работают путем добавления тегов к следующим образом:

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

Это может быть интересно читателям:

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

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

Answer 4

Я попробовал вышеупомянутое от моего Samsung Galaxy S1

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

Answer 5

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

1. Прежде всего нам нужно установить область просмотра для нашего приложения следующим образом:

   <meta name="viewport" content="width=device-width, initial-scale=1">
   

   Здесь есть небольшой взлом для устройств с более высокими экранами (например, 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 Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">
   
   <!--iPhone 4, 4S and 2011 iPod Touch-->
   <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)">
   
   <!--iPhone 5 and 2012 iPod Touch-->
   <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)">
   
   <!--iPad landscape-->
   <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)">
   
   <!--iPad Portrait-->
   <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)">
   

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

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

   <!--iPhone 3GS, 2011 iPod Touch and older Android devices-->
   <link rel="apple-touch-icon" href="../images/mobile-icon-57.png">
   
   <!--1st generation iPad, iPad 2 and iPad mini-->
   <link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">
   
   <!--iPhone 4, 4S, 5 and 2012 iPod Touch-->
   <link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">
   
   <!--iPad 3rd and 4th generation-->
   <link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">
   

   ПРИМЕЧАНИЕ. Вы также можете использовать «предварительно составленный», чтобы значок не отображался с отражающим блеском iOS. Просто добавьте это слово, где вы определяете rel следующим образом:

   <link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
   

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