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

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

Thomas Steiner

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

Ресурс Использование
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 было формализовано Дэниелом Мерфи.