API перекрытия управления окном

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

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

• Член display_override манифеста веб-приложения должен быть установлен на window-controls-overlay.
• Прогрессивное веб-приложение должно быть установлено на настольной операционной системе.

Прогрессивные веб-приложения, установленные на настольных устройствах, могут отображаться в отдельных окнах приложений, как и обычные приложения. Вот как выглядит окно приложения:

Как видно выше, окно приложения состоит из двух основных областей:

• Область строки заголовка вверху.
• Область содержимого приложения внизу, которая отображает HTML-содержимое PWA.

Область строки заголовка содержит критически важные для системы кнопки максимальное отображение, минимизировать и закрыть (их положение может меняться в зависимости от операционной системы), название приложения (которое берется из элемента <title> HTML-страницы) и, возможно, специфичные для пользователя кнопки PWA.

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

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

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

Прогрессивные веб-приложения могут размещать свой веб-контент в области, которую обычно занимает строка заголовка, используя переменные среды CSS titlebar-area-x, titlebar-area-y, titlebar-area-width, и titlebar-area-height. См. Использование env() для предотвращения скрытия содержимого кнопками управления окнами в настольных PWA.

WindowControlsOverlay Экспериментально

Предоставляет информацию о видимости и геометрии строки заголовка и событие, чтобы узнать, когда она изменяется.

WindowControlsOverlayGeometryChangeEvent Экспериментально

Представляет события, предоставляющие информацию об области строки заголовка настольного прогрессивного веб-приложения, когда ее размер или видимость изменяются.

Navigator.windowControlsOverlay

Возвращает интерфейс WindowControlsOverlay, который предоставляет информацию о геометрии строки заголовка в настольных прогрессивных веб-приложениях.

• Настройка перекрытия управления окнами строки заголовка вашего PWA
• Выход за пределы окна
• Отображение содержимого в строке заголовка