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

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

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

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

Свойство Использовать
fullscreen Открывает веб-приложение без пользовательского интерфейса браузера и занимает всю доступную область экрана.
standalone Открывает веб-приложение, которое выглядит и работает как отдельное приложение. Приложение работает в отдельном окне, отдельно от браузера, и скрывает стандартные элементы пользовательского интерфейса браузера, такие как адресная строка.
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 было формализовано Дэниелом Мерфи .