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

Thomas Steiner

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

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

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

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

• Переходили по ссылкам с других веб-страниц.
• URL-адрес запускается из приложения для конкретной платформы в операционной системе.
• Навигация, происходящая из API ярлыков приложений .
• Ссылки, которые проходят через обработчики протокола URL .
• Навигации, вызванные обработчиками файлов .
• Навигации, вызванные API Share Target .
• …и другие.

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

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

Примечание. Обсуждается добавление параметров, которые вообще не открывают окно, а вместо этого запускают событие launch в выбранном окне переднего плана или в сервисном работнике. Подробности см. в описании события launch , а точнее, в разделах о existing-client-event и service-worker .

Демо

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

1. https://continous-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 API истек 30 марта 2022 г. для Chromium 97 и более ранних версий. Он будет заменен набором новых функций и API в Chromium 98 и более поздних версиях, которые включают в себя активируемый пользователем захват ссылок и API-интерфейс обработчика запуска .

Захват ссылок

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

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

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

Запустить API-обработчик

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

1. Зарегистрируйте свой сайт для использования пробной версии Origin Handler и поместите пробный ключ 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" (который никогда не был реализован в пробной версии источника декларативного захвата ссылок), добавьте: "launch_handler": { "route_to": "existing-client-retain" } . При выборе этого параметра страницы в области вашего приложения больше не будут автоматически перемещаться при захвате навигации по ссылкам. Вы должны обрабатывать LaunchParams в JavaScript, вызывая window.launchQueue.setConsumer() , чтобы включить навигацию.

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

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

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

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

Расскажите нам о дизайне API

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

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

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

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

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

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

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

• Проект спецификации
• Объяснитель
• Ошибка хрома
• Намерение создать прототип
• Намерение экспериментировать
• Запись ChromeStatus

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

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