Подготовка к режимам отображения завтрашнего дня

PWA могут использовать свойство display_override для работы со специальными режимами отображения.

Томас Штайнер

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

Свойство Использовать
fullscreen Открывает веб-приложение без пользовательского интерфейса браузера и занимает всю доступную область отображения.
standalone Открывает веб-приложение, которое выглядит как автономное приложение. Приложение запускается в собственном окне, отдельном от браузера, и скрывает стандартные элементы пользовательского интерфейса браузера, такие как строка URL-адреса.
minimal-ui Этот режим похож на standalone , но предоставляет пользователю минимальный набор элементов пользовательского интерфейса для управления навигацией (например, возврат назад и перезагрузка).
browser Стандартный браузер.

Эти режимы отображения следуют четко определенной резервной цепочке ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). Если браузер не поддерживает данный режим, он возвращается к следующему режиму отображения в цепочке.

Недостатки свойства display

Проблема с этим подходом с жесткой резервной цепочкой имеет три аспекта:

  • Разработчик не может запросить "minimal-ui" без принудительного возврата в режим отображения "browser" , если "minimal-ui" не поддерживается данным браузером.
  • У разработчиков нет возможности обрабатывать межбраузерные различия, например, если браузер включает или исключает кнопку «Назад» в окне для "standalone" режима.
  • Текущее поведение делает невозможным введение новых режимов отображения с обратной совместимостью, поскольку такие исследования, как режим приложения с вкладками, не имеют естественного места в резервной цепочке.

Свойство display_override

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

В приведенном ниже примере цепочка возврата к режиму отображения будет следующей. (Подробности о "window-controls-overlay" выходят за рамки этой статьи.)

  1. "window-controls-overlay" (Сначала посмотрите на display_override .)
  2. "minimal-ui"
  3. "standalone" (когда display_override исчерпан, оцените display .)
  4. "minimal-ui" (Наконец, используйте резервную цепочку display .)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

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

Благодарности

Свойство display_override было формализовано Дэниелом Мерфи .