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

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

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

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

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

Декларативный захват ссылок — это предложение для свойства манифеста веб-приложения под названием "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 , пользователь увидит подсказку до завершения навигации.

Демо

Демонстрация декларативного захвата ссылок на самом деле состоит из двух демонстраций, которые взаимодействуют друг с другом:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

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

Безопасность и разрешения

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

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

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

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

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

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

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

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

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

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

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

  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 origin), добавьте: "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

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

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

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

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

Декларативный захват ссылок был разработан Мэттом Джиукой при участии Алана Каттера и Доминика Нга . API был реализован Аланом Каттером. Эту статью рецензировали Джо Медли , Мэтт Джиука, Алан Каттер и Шунья Шишидо . Изображение героя — Зулмаури Сааведра на Unsplash .