Опубликовано: 19 августа 2025 г.
Управление навигацией охватывает методы управления тем, как прогрессивное веб-приложение (PWA) обрабатывает пользовательскую навигацию. Ключевым компонентом этого управления является захват навигации — процесс браузера, который определяет, должно ли нажатие на ссылку запускать установленное PWA или открывать новую вкладку браузера.
В этом руководстве рассматривается новая версия захвата навигации, доступная в Chrome 139. Хотя поведение браузера по умолчанию подходит для большинства случаев, более глубокое понимание этих методов управления и связанных с ними API необходимо, если вы хотите создать максимально удобный интерфейс для своих пользователей.
В разделе «Элементы управления для разработчиков» рассказывается, как настроить навигацию для обеспечения наилучших возможностей запуска вашего PWA.
Новое поведение по умолчанию
Чтобы соответствовать предпочтениям пользователей и снизить нагрузку, Chrome стандартизирует обработку ссылок. Ранее это поведение было разным на разных платформах. Мобильные устройства обычно отдавали приоритет запуску установленных приложений, в то время как браузеры для настольных компьютеров сначала открывали ссылку во вкладке, прежде чем сообщать приложению, что оно может её обработать.
Новый унифицированный подход к захвату навигации автоматически открывает ссылки в соответствующих установленных PWA. Ссылки будут перенаправляться на вкладку браузера только в том случае, если PWA не установлен или пользователь отказался от этой функции. Эта функция доступна в Chrome 139 для Windows, Mac и Linux, а поддержка ChromeOS появится в будущих версиях.
Процесс управления навигацией
Захват навигации является частью процесса управления навигацией. Этот процесс охватывает весь процесс, от первого действия пользователя до решений браузера и итогового поведения, настроенного разработчиком:
- Действия пользователя: Включают такие взаимодействия, как нажатие или нажатие ссылок.
- Решения браузера: включают задачи и решения, управляемые браузером, такие как поведение по умолчанию, например захват навигации.
- Элементы управления разработчика: включают веб-API, которые позволяют разработчикам указывать браузеру, как выполнять определенные задачи.
Взаимодействие этих элементов определяет, будет ли PWA открываться в отдельном окне или на вкладке браузера.
Фундаментальный пример использования управления навигацией — это когда пользователь нажимает или щёлкает по ссылке на установленное PWA-приложение на другой странице браузера. В следующем примере рассматривается случай, когда пользователь установил PWA-приложение Google Chat и нажимает на ссылку на него в приглашении Google Календаря.
calendar.google.com .Действия пользователя
Каждое действие пользователя состоит из трёх ключевых элементов: события (например, щелчка или нажатия), поверхности , на которой оно происходит (например, веб-страницы или ярлыка на рабочем столе), и типа активируемой ссылки (например, URL-адреса HTTPS). Например, действием пользователя может быть нажатие ссылки на https://chat.google.com/meeting_room_id в рамках Google Chat PWA с веб-страницы на calendar.google.com .
Решения браузера
После действия пользователя, например, нажатия кнопки на предыдущем шаге, браузер запускает процесс захвата навигации, чтобы определить, следует ли открывать ссылки во вкладке браузера или в установленном PWA. Процесс состоит из следующих этапов:
- Определите, можно ли захватить навигацию : Как правило, навигация считается захватываемой , если она создает новый фрейм и не открывается в дополнительном контексте просмотра.
- Определите контролирующий PWA : если навигация перехватывается, браузер пытается найти PWA, который «контролирует» URL (подпадает под область, определенную в манифесте веб-приложения).
- Проверка пользовательских настроек : если найден управляющий PWA, браузер проверяет пользовательские настройки. Если пользователь не отключил PWA в настройках приложения, он запускается; в противном случае ссылка открывается в новой вкладке браузера.
- Запуск PWA : Браузер запускает PWA, используя алгоритм обработки запуска. Вы можете управлять этим процессом с помощью API обработчика запуска , который будет рассмотрен далее.
Следующая диаграмма суммирует этот процесс:
Элементы управления разработчика
Хотя процесс навигации в основном зависит от настроек браузера по умолчанию и пользовательских настроек, вы можете использовать различные API для управления отдельными его аспектами. После недавнего обновления функции захвата навигации некоторые давно существующие веб-API стали более актуальными.
API обработчика запуска
Этот API вступает в действие, когда браузер решает запустить PWA, позволяя вам контролировать способ его запуска, например, в новом или существующем окне.
Определите, как запускается PWA, с помощью элемента launch_handler в манифесте веб-приложения, который включает подполе client_mode . Это подполе определяет, следует ли использовать новое или существующее окно, и должна ли навигация осуществляться по нему. Допустимые значения client_mode :
-
focus-existing: для обработки ссылки в существующем окне приложения, например PWA, которое уже работает в автономном режиме. -
navigate-existing: в этом случае последний выполненный сеанс взаимодействия, контекст просмотра в окне веб-приложения перенаправляется на целевой URL-адрес запуска. -
navigate-new: с помощью этой опции в окне веб-приложения создается новый контекст просмотра для загрузки целевого URL-адреса запуска.
Используйте launchQueue API для предоставления дополнительных параметров и обработки особых случаев. API Launch Handler доступен с Chrome 110, но стал гораздо полезнее с обновлением функции захвата навигации. Подробнее об этом можно узнать в документации по API Launch Handler .
Другие связанные API
Помимо обработки запуска, в этом процессе могут участвовать и другие API, в зависимости от конкретных потребностей вашего приложения. К ним относятся обработчики URL-протоколов (URL Protocol Handlers) , которые позволяют веб-приложению регистрировать возможность обработки URL-схем, выходящих за рамки стандартных http и https (например, стандартных протоколов, таких как mailto: или пользовательских, таких как web+music ). Кроме того, API Web App Scope Extensions (в настоящее время находится в разработке) позволяет расширить область действия вашего PWA, чтобы захватывать ссылки из других источников, включая поддомены, чтобы при нажатии пользователем на ссылку из связанного источника PWA мог запускаться. Подробное их рассмотрение выходит за рамки данной статьи, но вы можете ознакомиться с соответствующими ссылками, чтобы узнать больше.
Пример использования: захват ссылок Google Chat в Chat PWA
В заключение рассмотрим, как работают вместе различные части на примере нажатия ссылки Календаря Google на комнату чата Google для пользователя, который уже установил Google Chat PWA.
Перед захватом навигации
В следующем видео пользователь создаёт встречу в Google Календаре и приглашает трёх гостей. Приложение «Календарь» автоматически генерирует ссылку на Google Чат, которая включает всех участников. При нажатии на эту ссылку чат открывается в новой вкладке браузера. Значок в адресной строке сигнализирует об установке соответствующего PWA, но пользователю требуется запустить его вручную. Так было до обновления захвата навигации:
После захвата навигации
В следующем видео показан тот же рабочий процесс пользователя, но теперь с новым поведением захвата навигации. В этой версии щелчок по ссылке Google Chat из Google Calendar открывает соответствующую чат-комнату непосредственно в установленном PWA. Кроме того, команда Google Chat реализовала обработку запуска, добавив атрибут launch_handler в манифест веб-приложения. Установив его client_mode в focus-existing , они гарантируют, что ссылка откроется в существующем экземпляре PWA, если он уже запущен. Устраняя задержку, связанную с открытием новой вкладки браузера и последующим запуском загрузки страницы, эффективное «время до взаимодействия с пользователем» может быть, по умолчанию, быстрее. Фактически, Google Chat значительно улучшил задержку навигации, устранив необходимость запуска нового приложения.
Заключение и дальнейшие шаги
В этой статье рассматривается новое стандартное поведение захвата навигации, доступное в Chrome 139, с упором на распространённый сценарий использования, когда пользователь нажимает на HTTPS-ссылку в установленном PWA. Дополнительную информацию и сценарии использования можно найти в разделе «Управление навигацией в установленных PWA» . На следующей диаграмме показана полная разбивка сценариев использования, включая пользовательские события, поверхности и протоколы, с соответствующими результатами:
Управление навигацией — важный, но часто упускаемый из виду аспект пользовательского опыта вашего приложения, поскольку он контролирует точку входа. Функции и ссылки, рассмотренные в этой статье, помогут вам добиться наилучшего пользовательского опыта в вашем PWA.