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

Томас Штайнер

Что такое декларативный захват ссылок?

Иногда переход по ссылкам в интернете может быть приятным сюрпризом. Например, при нажатии на ссылку YouTube на веб-странице на мобильном устройстве открывается приложение YouTube для iOS или Android, если оно установлено. Но если установить PWA YouTube на настольный компьютер и нажать на ссылку, она откроется во вкладке браузера.

Но всё становится сложнее. Что если ссылка появляется не на веб-сайте, а в сообщении чата, которое вы получаете в одном из приложений Google для обмена сообщениями? В настольных операционных системах, где существует понятие отдельных окон приложений, если приложение уже открыто, следует ли создавать новое окно или вкладку для каждого клика по ссылке? Если задуматься, существует множество способов отслеживания ссылок и навигации, включая, помимо прочего, следующие:

Предложение по декларативному захвату ссылок (Declarative Link Capturing) касается свойства манифеста веб-приложения под названием "capture_links" , которое позволяет разработчикам декларативно определять, что должно происходить, когда браузеру предлагается перейти по URL-адресу, находящемуся в области навигации приложения, из контекста, находящегося вне этой области. Это предложение не применяется, если пользователь уже находится в области навигации (например, если у пользователя открыта вкладка браузера, находящаяся в этой области, и он щелкает внутреннюю ссылку).

Некоторые особые условия, такие как щелчок средней кнопкой мыши по ссылке (или щелчок правой кнопкой мыши с последующим «открыть в новой вкладке»), обычно не запускают механизм перехвата ссылок. Параметр target=_self или target=_blank не имеет значения, поэтому ссылки, на которые нажаты в окне браузера (или окне другого PWA), будут открываться в PWA, даже если они обычно приводят к навигации внутри той же вкладки.

Предлагаемые варианты использования

Примеры сайтов, которые могут использовать этот API, включают:

  • Прогрессивные веб-приложения (PWA) стремятся открывать окно, а не вкладку браузера, при нажатии пользователем на ссылку. В настольной среде часто целесообразно открывать несколько окон приложений одновременно.
  • Однооконные PWA, в которых разработчик предпочитает иметь открытым только один экземпляр приложения одновременно, при этом новые действия навигации будут фокусироваться на существующем экземпляре. Примеры использования:
    • Приложения, для которых целесообразно запускать только один экземпляр (например, музыкальный плеер, игра).
    • Приложения, которые включают в себя управление несколькими документами в рамках одного экземпляра (например, панель вкладок, реализованная на HTML).

Включить с помощью about://flags

Чтобы поэкспериментировать с декларативным захватом ссылок локально, без исходного пробного токена, включите флаг #enable-desktop-pwas-link-capturing в about://flags .

Как использовать декларативный захват ссылок?

Разработчики могут декларативно определить способ захвата ссылок, используя дополнительное поле манифеста веб-приложения "capture_links" . В качестве значения оно принимает строку или массив строк. Если задан массив строк, пользовательский агент выбирает первый поддерживаемый элемент в списке, по умолчанию — "none" .

Поддерживаются следующие значения:

  • "none" (по умолчанию): Отключение перехвата ссылок; переходы по ссылкам, ведущим к этой области действия PWA, осуществляются в обычном режиме без открытия окна PWA.
  • "new-client" : Каждый клик по ссылке открывает новое окно PWA по указанному URL-адресу.

  • "existing-client-navigate" : Нажатая ссылка открывается в существующем окне PWA, если таковое имеется, или в новом окне, если его нет. Если существует более одного окна PWA, браузер может выбрать одно из них произвольно. Это работает как "new-client" , если ни одно окно не открыто. Этот вариант лучше всего подходит для сайтов "только для чтения", которые не хранят пользовательские данные в памяти, например, для музыкальных проигрывателей. Если страница, с которой осуществляется переход, имеет событие beforeunload , пользователь увидит запрос перед завершением навигации.

Демо

Демонстрационная версия Declarative Link Capturing фактически состоит из двух взаимодействующих демонстрационных примеров:

  1. Участок 1
  2. Участок 2

Видеоролик демонстрирует взаимодействие двух приложений. Показаны два разных режима работы: "new-client" и "existing-client-navigate" . Обязательно протестируйте приложения в разных состояниях, например, в отдельной вкладке или в качестве установленного PWA, чтобы увидеть разницу в поведении.

Безопасность и права доступа

Команда Chromium разработала и внедрила декларативный захват ссылок, используя основные принципы, изложенные в документе «Управление доступом к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику. Этот API предоставляет сайтам новые дополнительные возможности управления. Во-первых, возможность автоматического открытия установленных приложений в окне. Это использует существующий пользовательский интерфейс, но позволяет сайту автоматически запускать эту функцию. Во-вторых, возможность фокусировки существующего окна на собственном домене и запуска события, содержащего URL-адрес клика. Это позволяет сайту перенаправлять существующее окно на новую страницу, переопределяя стандартный поток навигации HTML.

Переход на API обработчика запуска

Срок действия пробного периода API Declarative Link Capturing для Chromium 97 и более ранних версий истек 30 марта 2022 года . В Chromium 98 и более поздних версиях он был заменен набором новых функций и API , включая возможность захвата ссылок пользователем и API Launch Handler .

В Chromium 98 автоматическое перехватывание ссылок теперь является функцией, которую пользователь выбирает сам, а не предоставляет при установке веб-приложения. Чтобы включить перехват ссылок, пользователю необходимо запустить установленное приложение из браузера, используя функцию «Открыть с помощью» , и выбрать «Запомнить мой выбор» .

Пример настройки «Открыть с помощью» установленного приложения с включенной опцией «Запомнить мой выбор».

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

Пример страницы настроек установленного приложения.

Функция захвата ссылок пока доступна только в ChromeOS; поддержка Windows, macOS и Linux находится в стадии разработки.

API обработчика запуска

Управление входящей навигацией перенесено в API обработчика запуска, который позволяет веб-приложениям определять способ запуска в различных ситуациях, таких как перехват ссылок, обмен целевыми объектами или файлами и т. д. Для перехода от декларативного API перехвата ссылок к API обработчика запуска:

  1. Зарегистрируйте свой сайт для пробной версии Launch Handler и вставьте ключ пробной версии в свое веб-приложение.

  2. Добавьте запись "launch_handler" в манифест вашего сайта.

    • Чтобы использовать "capture_links": "new-client" , добавьте: "launch_handler": { "route_to": "new-client" } .
    • Чтобы использовать "capture_links": "existing-client-navigate" , добавьте: "launch_handler": { "route_to": "existing-client-navigate" } .
    • Чтобы использовать "capture_links": "existing-client-event" (который так и не был реализован в пробной версии Declarative Link Capturing), добавьте: "launch_handler": { "route_to": "existing-client-retain" } . С этим параметром страницы в области видимости вашего приложения больше не будут автоматически переходить по ссылкам при их перехвате. Для включения навигации необходимо обрабатывать параметры LaunchParams в JavaScript, вызвав window.launchQueue.setConsumer() .

Поле capture_links и регистрация пробной версии Declarative Link Capturing действительны до 30 марта 2022 года. Это гарантирует, что пользователи Chromium 97 и более ранних версий смогут запускать веб-приложение по перехваченной ссылке.

Для получения более подробной информации ознакомьтесь с разделом «Управление способом запуска вашего приложения» .

Обратная связь

Команда Chromium хочет узнать о вашем опыте использования декларативного захвата ссылок.

Расскажите о проектировании API.

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности? Создайте заявку в соответствующем репозитории GitHub или добавьте свои мысли в существующую заявку.

Сообщить о проблеме с реализацией

Вы обнаружили ошибку в реализации Chromium? Или реализация отличается от спецификации? Сообщите об ошибке на new.crbug.com . Обязательно укажите как можно больше подробностей, инструкции по воспроизведению и введите UI>Browser>WebAppInstalls в поле Components .

Показать поддержку API

Планируете ли вы использовать декларативный захват ссылок? Ваша публичная поддержка помогает команде Chromium расставлять приоритеты в разработке новых функций и показывает другим производителям браузеров, насколько важно их поддерживать.

Отправьте твит @ChromiumDev , используя хэштег #DeclarativeLinkCapturing , и расскажите, где и как вы его используете.

Полезные ссылки

Благодарности

Декларативный захват ссылок был разработан Мэттом Джукой при участии Алана Каттера и Доминика Нга . API был реализован Аланом Каттером. Данный документ был проверен Джо Медли , Мэттом Джукой, Аланом Каттером и Шуньей Шишидо .