Управление окнами

PWA вне браузера управляет собственным окном. Узнайте об API и возможностях управления окном в операционной системе.

Работа в собственном окне, управляемом вашим PWA, имеет все преимущества и обязанности любого окна в этой операционной системе, например:

  • Возможность перемещать и изменять размер окна в многооконных операционных системах, таких как Windows или ChromeOS.
  • Совместное использование экрана с другими окнами приложений, например, в режиме разделения экрана iPadOS или режиме разделения экрана Android.
  • Появляется в доках, на панелях задач, в меню Alt-Tab на рабочем столе, а также в списках многозадачных окон на мобильных устройствах.
  • Возможность сворачивать, перемещать окно по экранам и рабочим столам, а также закрывать его в любой момент.

Переместить и изменить размер окна

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

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

Невозможно определить предпочтительный размер и положение вашего PWA в манифесте. Вы можете перемещать и изменять размер окна только с помощью API JavaScript. Из своего кода вы можете перемещать и изменять размер собственного окна PWA, используя функции moveTo(x, y) и resizeTo(x, y) объекта window .

Например, вы можете изменить размер и переместить окно PWA при загрузке PWA, используя:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Вы можете запросить текущий размер и положение экрана, используя объект window.screen ; вы можете определить, когда размер окна изменяется, используя событие resize объекта window . Не существует события для захвата перемещения окна, поэтому вы можете часто запрашивать положение.

Вместо абсолютного перемещения и изменения размера окна вы можете перемещать его относительно и изменять размер с помощью moveBy() и resizeBy() .

Просмотреть другие сайты

Если вы хотите отправить пользователя на внешний сайт, который выходит за рамки вашего PWA, вы можете сделать это с помощью стандартного HTML-элемента <a href> . Используйте location.href или откройте новое окно на совместимых платформах.

Когда вы посещаете URL-адрес, который выходит за рамки вашего манифеста , механизм браузера вашего PWA отображает браузер внутри приложения в контексте вашего окна.

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

Некоторые особенности встроенных в приложение браузеров:

  • Они появляются поверх вашего контента.
  • У них есть статическая адресная строка, показывающая текущее происхождение, заголовок окна и меню. Обычно они имеют тему theme_color вашего манифеста.
  • Из контекстного меню вы можете открыть этот URL-адрес в браузере.
  • Пользователи могут закрыть браузер или вернуться назад.

Пока браузер в приложении находится на экране, ваше PWA ожидает в фоновом режиме, как будто другое окно закрывает его.

Браузер внутри приложения на iPhone при просмотре URL-адреса, выходящего за рамки автономного PWA.
Браузер внутри приложения на Android при просмотре URL-адреса, выходящего за рамки автономного PWA.

Потоки авторизации

Многие потоки веб-аутентификации и авторизации требуют перенаправления пользователя на другой URL-адрес в другом источнике, чтобы получить токен, который возвращается в источник вашего PWA, например, с помощью OAuth 2.0 .

В этих случаях браузер в приложении выполняет следующий процесс:

  1. Пользователь открывает ваш PWA и нажимает кнопку «Войти».
  2. Ваш PWA перенаправляет пользователя на URL-адрес, который выходит за рамки PWA, так что механизм рендеринга открывает браузер внутри приложения в вашем PWA.
  3. Пользователь может отменить использование браузера в приложении и вернуться к PWA в любое время.
  4. Пользователь авторизуется в браузере приложения. Сервер аутентификации перенаправляет пользователя к источнику вашего PWA, отправляя токен в качестве аргумента.
  5. Браузер в приложении закрывается, когда обнаруживает URL-адрес, входящий в область действия PWA.
  6. Механизм перенаправляет навигацию в главном окне PWA на URL-адрес, по которому сервер аутентификации перешел в браузере в приложении.
  7. Ваш PWA получает токен, сохраняет его и отображает PWA.

Принудительно использовать навигацию браузера

Если вы хотите принудительно открыть браузер с помощью URL-адреса, а не браузера в приложении, вы можете использовать цель _blank элементов <a href> . Это работает только на настольных PWA. На мобильных устройствах нет возможности открыть браузер по URL-адресу.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Открыть новые окна

На рабочем столе пользователи могут открывать более одного окна одного и того же PWA. Каждое окно имеет разную навигацию для одного и того же start_url , как если бы вы открывали две вкладки браузера с одним и тем же URL-адресом. В меню PWA пользователи могут выбрать «Файл» , затем «Новое окно» . Из вашего кода PWA вы можете открыть новое окно с помощью функции open() .

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

То же самое установленное PWA с несколькими открытыми окнами в настольной операционной системе.

Когда вы вызываете open() в окне PWA в iOS или iPadOS, он возвращает null и не открывает окно. Открытие новых окон на Android создает новый браузер в приложении для URL-адреса, даже если URL-адрес находится в области действия вашего PWA, что обычно не вызывает внешний просмотр.

Название окна

Элемент <title> в основном использовался в целях SEO, поскольку пространство на вкладке браузера ограничено. Когда вы переходите из браузера в окно PWA, вам доступно все пространство строки заголовка.

Вы можете определить содержимое строки заголовка:

  • Статически в вашем HTML-элементе <title> .
  • Динамическое изменение строкового свойства document.title в любое время.

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

Режим вкладок

Режим вкладок — это экспериментальная возможность, которая позволяет вашему PWA иметь дизайн на основе вкладок, аналогичный веб-браузеру. В этом случае пользователь может открыть несколько вкладок в одном PWA, но все они будут связаны в одном окне операционной системы.

Подробнее об этой экспериментальной возможности можно прочитать в разделе Режим приложений с вкладками для PWA .

Наложение элементов управления окнами

Мы упоминали, что вы можете изменить заголовок окна, определив значение элемента <title> или свойства document.title . Но это всегда строковое значение. Что, если бы мы могли создать строку заголовка с помощью HTML, CSS и изображений? Может помочь наложение элементов управления окнами — экспериментальная возможность в Microsoft Edge и Google Chrome для настольных PWA.

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

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

Управление окнами

Имея несколько экранов, пользователи хотят использовать все доступное им пространство. Например:

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

API управления окнами позволяет PWA делать это и даже больше.

Получение сведений об экране

API управления окнами добавляет новый метод window.getScreenDetails() , который возвращает объект с экранами в виде неизменяемого массива присоединенных экранов. Также существует живой объект, доступный из ScreenDetails.currentScreen , соответствующий текущему window.screen .

Возвращаемый объект также запускает событие screenschange при изменении массива screens . (Этого не происходит при изменении атрибутов на отдельных экранах.) Отдельные экраны, либо window.screen , либо экран в массиве screens , также запускают событие change при изменении своих атрибутов.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Если пользователь или операционная система перемещает окно вашего PWA с одного экрана на другой, событие currentscreenchange также запускается из объекта сведений об экране.

Блокировка пробуждения экрана

Представьте себе это. Вы находитесь на кухне и следуете рецепту на планшете. Вы только что закончили подготовку ингредиентов. Ваши руки в беспорядке, и вы возвращаетесь к своему устройству, чтобы прочитать следующий шаг. Катастрофа! Экран потемнел! API Screen Wake Lock доступен для вас и позволяет PWA предотвращать затемнение, переход в спящий режим или блокировку экранов, позволяя пользователям без беспокойства останавливаться, запускаться, выходить и возвращаться.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Виртуальная клавиатура

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

Благодаря API VirtualKeyboard ваш PWA может иметь больший контроль над клавиатурой на совместимых платформах, используя интерфейс navigator.virtualKeyboard .

  • Показывайте и скрывайте виртуальную клавиатуру с помощью navigator.virtualKeyboard.show() и navigator.virtualKeyboard.hide() .
  • Сообщите браузеру, что вы закрываете виртуальную клавиатуру самостоятельно, установив для navigator.virtualKeyboard.overlaysContent значение true .
  • Знайте, когда клавиатура появляется и исчезает с событием geometrychange .
  • Установите политику виртуальной клавиатуры при редактировании элементов хоста, задав для contenteditable auto или manual с помощью HTML-атрибута virtualkeyboardpolicy . Политика позволяет вам решить, хотите ли вы, чтобы виртуальная клавиатура обрабатывалась автоматически браузером ( auto ) или вашим скриптом ( manual ).
  • Используйте переменные среды CSS, чтобы получить информацию о внешнем виде виртуальной клавиатуры, например, keyboard-inset-height и keyboard-inset-top .

Узнайте больше об этом API в разделе «Полный контроль с помощью VirtualKeyboard API» .