Создание полноэкранного опыта

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

Размещение вашего приложения или сайта в полноэкранном режиме

Существует несколько способов, с помощью которых пользователь или разработчик может получить полноэкранное веб-приложение.

  • Запросить браузер перейти в полноэкранный режим в ответ на жест пользователя.
  • Установите приложение на главный экран.
  • Притворитесь: автоматически скройте адресную строку.

Запросить браузер перейти в полноэкранный режим в ответ на жест пользователя

Не все платформы равны . iOS Safari не имеет полноэкранного API, но есть в Chrome на Android, Firefox и IE 11+. Большинство создаваемых вами приложений будут использовать комбинацию JS API и селекторов CSS, предусмотренных полноэкранной спецификацией. Основные API JS, на которые вам следует обратить внимание при создании полноэкранного режима:

  • element.requestFullscreen() (в настоящее время с префиксом в Chrome, Firefox и IE) отображает элемент в полноэкранном режиме.
  • document.exitFullscreen() (в настоящее время имеет префикс в Chrome, Firefox и IE. Вместо этого Firefox использует cancelFullScreen() ) отменяет полноэкранный режим.
  • document.fullscreenElement (в настоящее время с префиксом в Chrome, Firefox и IE) возвращает true, если какой-либо из элементов находится в полноэкранном режиме.

Когда ваше приложение работает в полноэкранном режиме, вам больше не доступны элементы управления пользовательским интерфейсом браузера. Это меняет способ взаимодействия пользователей с вашим опытом. У них нет стандартных элементов управления навигацией, таких как вперед и назад; у них нет аварийного люка, то есть кнопки «Обновить». Важно учесть этот сценарий. Вы можете использовать некоторые селекторы CSS, чтобы изменить стиль и представление вашего сайта, когда браузер переходит в полноэкранный режим.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Приведенный выше пример немного надуман; Я скрыл всю сложность использования вендорных префиксов.

Фактический код намного сложнее. Mozilla создала очень полезный скрипт, который можно использовать для переключения в полноэкранный режим. Как видите, ситуация с префиксом поставщика сложна и громоздка по сравнению с указанным API. Даже несмотря на немного упрощенный код, приведенный ниже, он по-прежнему сложен.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Мы, веб-разработчики, ненавидим сложность. Хороший абстрактный API высокого уровня, который вы можете использовать, — это модуль Screenfull.js Синдре Сорхуса, который объединяет два немного разных JS API и префиксы поставщиков в один согласованный API.

Советы по полноэкранному API

Делаем документ полноэкранным
Полноэкранный режим на элементе body
Рисунок 1. Полноэкранный режим элемента body.

Естественно думать, что вы берете элемент body в полноэкранном режиме, но если вы используете движок рендеринга на основе WebKit или Blink, вы увидите странный эффект сокращения ширины тела до минимально возможного размера, который будет содержать весь контент. (Mozilla Gecko в порядке.)

Полноэкранный режим элемента документа
Рисунок 2. Полноэкранный режим элемента документа.

Чтобы исправить это, используйте элемент document вместо элемента body:

document.documentElement.requestFullscreen();
Создание полноэкранного видеоэлемента

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

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

Если в вашем элементе <video> не определен атрибут управления, пользователь не сможет управлять видео, когда оно находится в полноэкранном режиме. Рекомендуемый способ сделать это — иметь базовый контейнер, в который будет помещено видео и элементы управления, которые вы хотите, чтобы пользователь видел.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Это дает вам гораздо больше гибкости, поскольку вы можете комбинировать объект-контейнер с псевдоселектором CSS (например, чтобы скрыть кнопку «goFS»).

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Используя эти шаблоны, вы можете определить, когда работает полноэкранный режим, и соответствующим образом адаптировать пользовательский интерфейс, например:

  • Предоставляя ссылку на стартовую страницу
  • Предоставляя механизм закрытия диалогов или перемещения назад.

Запуск полноэкранного режима страницы с главного экрана

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

На основных мобильных платформах это довольно легко реализовать с помощью метатегов или файлов манифеста следующим образом.

iOS

С момента запуска iPhone пользователи получили возможность устанавливать веб-приложения на главный экран и запускать их как полноэкранные веб-приложения.

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

Если для содержимого установлено значение «Да», веб-приложение работает в полноэкранном режиме; в противном случае это не так. По умолчанию для отображения веб-контента используется Safari. Вы можете определить, отображается ли веб-страница в полноэкранном режиме, используя логическое свойство JavaScript window.navigator.standalone, доступное только для чтения.

Яблоко

Хром для Android

Команда Chrome недавно реализовала функцию, которая сообщает браузеру запускать страницу в полноэкранном режиме, когда пользователь добавляет ее на главный экран. Он похож на модель iOS Safari.

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

Вы можете настроить свое веб-приложение так, чтобы значок ярлыка приложения добавлялся на главный экран устройства, а приложение запускалось в полноэкранном «режиме приложения» с помощью пункта меню Chrome для Android «Добавить на главный экран».

Гугл Хром

Лучшим вариантом является использование манифеста веб-приложения.

Манифест веб-приложения (Chrome, Opera, Firefox, Samsung)

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

  1. Сообщаем браузеру о вашем манифесте
  2. Описываю как запустить

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

<link rel="manifest" href="/manifest.json" />

Chrome поддерживает манифесты начиная с версии 38 для Android (октябрь 2014 г.) и дает вам контроль над тем, как ваше веб-приложение будет выглядеть при его установке на главный экран (через свойства short_name , name и icons ), а также как оно должно запускаться при его запуске. пользователь нажимает на значок запуска (через start_url , display и orientation ).

Пример манифеста показан ниже. Он не показывает все, что может быть в манифесте. 

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

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

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

Служебные приложения

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

    "display": "standalone"
Игры

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

Если вы разрабатываете вертикальный скроллер или такую ​​игру, как Flappy Birds, вам, скорее всего, захочется, чтобы ваша игра всегда работала в портретном режиме. 

    "display": "fullscreen",
    "orientation": "portrait"

С другой стороны, если вы создаете головоломку или игру типа X-Com, вам, вероятно, захочется, чтобы игра всегда использовала альбомную ориентацию. 

    "display": "fullscreen",
    "orientation": "landscape"
Новостные сайты

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

Выбор зависит от вас и от того, как, по вашему мнению, ваши пользователи захотят получить доступ к вашему опыту. Если вы хотите, чтобы на вашем сайте были все возможности браузера Chrome, которые вы ожидаете от сайта, вы можете установить отображение browser . 

    "display": "browser"

Если вы хотите, чтобы ваш новостной сайт выглядел так, как будто большинство новостных приложений рассматривают свою работу как приложения и удалили весь веб-подобный Chrome из пользовательского интерфейса, вы можете сделать это, установив для отображения значение standalone . 

    "display": "standalone"

Подделка: автоматическое скрытие адресной строки

Вы можете «подделать полноэкранный режим», автоматически скрыв адресную строку следующим образом: 

window.scrollTo(0, 1);

Это довольно простой метод: страница загружается, и панель браузера убирается с дороги. К сожалению, он не стандартизирован и плохо поддерживается. Вам также придется поработать над кучей особенностей.

Например, браузеры часто восстанавливают положение на странице, когда пользователь возвращается к ней. Использование window.scrollTo отменяет это, что раздражает пользователя. Чтобы обойти эту проблему, вам нужно сохранить последнюю позицию в localStorage и иметь дело с пограничными случаями (например, если у пользователя страница открыта в нескольких окнах).

Рекомендации по UX

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

Не полагайтесь на элементы управления навигацией

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

Вы можете легко определить, работаете ли вы в полноэкранном режиме или в установленном режиме на всех основных платформах.

iOS

В iOS вы можете использовать логическое значение navigator.standalone , чтобы узнать, запустил пользователь с главного экрана или нет. 

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Манифест веб-приложения (Chrome, Opera, Samsung)

При запуске установленного приложения Chrome не работает в полноэкранном режиме, поэтому document.fullscreenElement возвращает значение null, а селекторы CSS не работают.

Когда пользователь запрашивает полноэкранный режим с помощью жеста на вашем сайте, доступны стандартные полноэкранные API, включая псевдоселектор CSS, который позволяет адаптировать ваш пользовательский интерфейс для реагирования на полноэкранное состояние, как показано ниже. 

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

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

@media (display-mode: fullscreen) {
}

Если пользователь запускает приложение в автономном режиме, медиа-запрос display-mode будет standalone : 

@media (display-mode: standalone) {
}

Firefox

Когда пользователь запрашивает полноэкранный режим через ваш сайт или пользователь запускает приложение в полноэкранном режиме, доступны все стандартные полноэкранные API, включая псевдоселектор CSS, который позволяет адаптировать ваш пользовательский интерфейс для реагирования на полноэкранное состояние, как показано ниже: 

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Интернет Эксплорер

В IE в псевдоклассе CSS отсутствует дефис, но в остальном он работает аналогично Chrome и Firefox. 

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Спецификация

Написание в спецификации соответствует синтаксису, используемому IE. 

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Держите пользователя в полноэкранном режиме

Полноэкранный API иногда может быть немного привередливым. Производители браузеров не хотят блокировать пользователей на полноэкранной странице, поэтому они разработали механизмы, позволяющие выйти из полноэкранного режима как можно скорее. Это означает, что вы не можете создать полноэкранный веб-сайт, занимающий несколько страниц, потому что:

  • Программное изменение URL-адреса с помощью window.location = "http://example.com" приводит к выходу из полноэкранного режима.
  • Пользователь, нажавший на внешнюю ссылку внутри вашей страницы, выйдет из полноэкранного режима.
  • Изменение URL-адреса с помощью API navigator.pushState также приведет к выходу из полноэкранного режима.

У вас есть два варианта, если вы хотите, чтобы пользователь работал в полноэкранном режиме:

  1. Используйте механизмы устанавливаемых веб-приложений для перехода в полноэкранный режим.
  2. Управляйте своим пользовательским интерфейсом и состоянием приложения с помощью фрагмента #.

Используя #syntax для обновления URL-адреса (window.location = "#somestate") и прослушивая событие window.onhashchange , вы можете использовать собственный стек истории браузера для управления изменениями в состоянии приложения, позволяя пользователю использовать свои аппаратные кнопки «Назад» или предложите простую программную кнопку «Назад» с помощью API истории следующим образом: 

window.history.go(-1);

Позвольте пользователю выбирать, когда переходить в полноэкранный режим

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

Не перехватывайте событие первого касания и не вызывайте requestFullscreen() .

  1. Это раздражает.
  2. В какой-то момент в будущем браузеры могут решить предложить пользователю разрешить приложению работать в полноэкранном режиме.

Если вы хотите запускать приложения в полноэкранном режиме, подумайте об использовании возможностей установки для каждой платформы.

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

Если вы планируете предлагать полноэкранный режим с помощью механизмов установленных приложений, будьте внимательны к пользователю.

  • Будьте осторожны. Используйте баннер или нижний колонтитул, чтобы сообщить им, что они могут установить приложение.
  • Если они отклонят приглашение, не показывайте его снова.
  • При первом посещении пользователи вряд ли захотят устанавливать приложение, если не будут довольны вашим сервисом. Подумайте о том, чтобы предложить им установить приложение после положительного взаимодействия с вашим сайтом.
  • Если пользователь регулярно посещает ваш сайт и не устанавливает приложение, он вряд ли установит ваше приложение в будущем. Не продолжайте рассылать им спам.

Заключение

Хотя у нас нет полностью стандартизированного и реализованного API, используя некоторые рекомендации, представленные в этой статье, вы можете легко создавать интерфейсы, использующие весь экран пользователя, независимо от клиента.

Обратная связь