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

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

Окно PWA

Работа в собственном окне, управляемом вашим 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 . Не существует события для захвата перемещения окна, поэтому вы можете часто запрашивать положение.

Переход на другие сайты

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

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

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

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

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

Браузер внутри приложения на 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 и изображений? Именно здесь на помощь приходит Window Controls Overlay — новая экспериментальная возможность в 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 находятся в фокусе.

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

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

Подробнее об этом API можно прочитать в разделе Полный контроль с помощью VirtualKeyboard API .

Ресурсы