Добавляем возможность отображать сайт как веб-приложение в iOS

Тэги: 

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

Во первых для возможности отображения сайта в полноэкранном режиме, необходимо в

добавить метатег
  1. <meta name="apple-mobile-web-app-capable" content="yes">

иначе наш сайт-приложение при клике на иконку будет открываться в сафари как обычный сайт

Так же можем поменять цвет статусбара:

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

Кто уже верстал сайты под мобильные устройства знает про тег viewport:

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

Чтобы на рабочем столе отображалась нужная нам иконка а не скриншот сайта, так же задаем её в метатегах (желательно несколько размеров как в примере):

  1. <link href="/site-ico76.png" rel="apple-touch-icon">
  2. <link href="/site-ico76.png" rel="apple-touch-icon" sizes="76x76">
  3. <link href="/site-ico120.png" rel="apple-touch-icon" sizes="120x120">
  4. <link href="/site-ico152.png" rel="apple-touch-icon" sizes="152x152">

Вот пример как добавить одну такую иконку в друпале в template.php:

  1. function MYTHEME_preprocess_page(&$variables) {
  2. $element = array(
  3. '#tag' => 'link',
  4. '#attributes' => array(
  5. 'href' => '/site-ico76.png',
  6. 'rel' => 'apple-touch-icon',
  7. 'sizes' => "76x76",
  8. ),
  9. );
  10. drupal_add_html_head($element, 'apple_touch_icon_76');
  11. }

Далее следует знать, что при кликах на ссылки нашего сайта, они будут открываться отдельно в сафари, а так же будут теряться куки сайта.
Этот момент легко решается с помощью javascript. Переходы по внутренним ссылкам делаем при помощи window.location
Вот что получилось у меня:

  1. $('a:not(".colorbox")').bind('click',function(e) {
  2. e.preventDefault();
  3. var site = /mysite\\.ru/;
  4. var url = $(this).attr('href');
  5. if (/^(http|https|ftp)/.test(url) && !site.test(url)) {
  6. window.location = url;
  7. }
  8. if (url == '/') {
  9. window.location = url;
  10. }
  11. });