Регистрация обработчика протокола URL для PWA

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

Thomas Steiner

Успех: регистрация обработчика протокола URL-адреса для PWA является частью проекта возможностей и доступна в Chrome 96.

Общие сведения о схемах (также известных как протоколы)

Унифицированный идентификатор ресурса (URI) — это компактная последовательность символов, идентифицирующая абстрактный или физический ресурс. Каждый URI начинается с имени схемы , которое ссылается на спецификацию назначения идентификаторов в этой схеме. По сути, синтаксис URI представляет собой объединенную и расширяемую систему именования, в которой спецификация каждой схемы может дополнительно ограничивать синтаксис и семантику идентификаторов, использующих эту схему. Схемы также известны как протоколы. Некоторые примеры схем вы можете увидеть ниже.

tel:[phone]
mailto:[e-mail]
news:comp.infosystems.www.servers.unix
https://web.dev/

Термин «унифицированный указатель ресурса» (URL) относится к подмножеству URI, которые, помимо идентификации ресурса, предоставляют средства определения местоположения ресурса путем описания его основного механизма доступа (например, его местоположения в сети).

Общие сведения о методе registerProtocolHandler()

Метод Navigator , предназначенный только для защищенного содержимого registerProtocolHandler() позволяет сайтам регистрировать свою способность открывать или обрабатывать определенные схемы URL-адресов. Поэтому сайтам необходимо вызывать метод так: navigator.registerProtocolHandler(scheme, url) . Эти два параметра определяются следующим образом:

• scheme : строка, содержащая протокол, который сайт хочет обрабатывать.
• url : строка, содержащая URL-адрес обработчика. Этот URL-адрес должен включать %s в качестве заполнителя, который будет заменен экранированным URL-адресом для обработки.

Схема должна быть либо одной из схем, включенных в безопасный список (например, mailto , bitcoin или magnet ), либо начинаться с web+ , за которым следует хотя бы одна или несколько строчных букв ASCII после префикса web+ , например, web+coffee .

Чтобы было понятнее, приведем конкретный пример потока:

1. Пользователь посещает сайт https://coffeeshop.example.com/ , который выполняет следующий вызов: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s') .
2. Позже, посещая https://randomsite.example.com/ , пользователь нажимает на ссылку, например <a href="web+coffee:latte-macchiato">All about latte macchiato</a> .
3. В результате браузер перейдет по следующему URL-адресу: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato . В этом случае строка поиска, декодированная по URL-адресу, будет иметь вид ?type=web+coffee://latte-macchiato .

Что такое обработка протокола

Нынешний механизм регистрации обработчика протокола URL-адреса для PWA предполагает регистрацию обработчика протокола как часть установки PWA через его манифест. После регистрации PWA в качестве обработчика протокола, когда пользователь нажимает гиперссылку с определенной схемой, например mailto , bitcoin или web+music в браузере или приложении для конкретной платформы, зарегистрированное PWA откроется и получит URL-адрес. Важно отметить, что и предлагаемая регистрация на основе манифеста, и традиционный registerProtocolHandler() на практике играют очень схожие роли, но при этом допускают возможность взаимодополняющего взаимодействия с пользователем:

• Сходства включают требования к списку схем, разрешенных к регистрации, а также к названию и формату параметров и т. д.
• Различия в регистрации на основе манифеста незначительны, но могут быть полезны для улучшения работы пользователей PWA. Например, регистрация PWA на основе манифеста может не требовать дополнительных действий пользователя, кроме инициированной пользователем установки PWA.

Случаи использования

• В текстовом процессоре PWA пользователь в документе встречает ссылку на презентацию, например web+presentations://deck2378465 . Когда пользователь нажимает на ссылку, презентация PWA автоматически открывается в нужной области и показывает набор слайдов.
• В приложении чата для конкретной платформы пользователь в сообщении чата получает ссылку на magnet URL-адрес. При нажатии на ссылку установленный торрент PWA запускается и начинает загрузку.
• У пользователя установлен PWA для потоковой передачи музыки. Когда друг делится ссылкой на песню, например web+music://songid=1234&time=0:13 , и пользователь нажимает на нее, PWA потоковой передачи музыки автоматически запускается в отдельном окне.

Как использовать регистрацию обработчика протокола URL для PWA

API для регистрации обработчика протокола URL-адреса тесно смоделирован на navigator.registerProtocolHandler() . Только на этот раз информация передается декларативно через манифест веб-приложения в новом свойстве под названием "protocol_handlers" , которое принимает массив объектов с двумя обязательными ключами "protocol" и "url" . В приведенном ниже фрагменте кода показано, как зарегистрировать web+tea и web+coffee . Значения представляют собой строки, содержащие URL-адрес обработчика с обязательным заполнителем %s для экранированного URL-адреса.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Несколько приложений регистрируются по одному и тому же протоколу

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

Одно и то же приложение регистрируется для нескольких протоколов

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

Обновления приложения и регистрация обработчика

Регистрация обработчиков синхронизируется с последней версией манифеста, предоставленной приложением. Есть два случая:

• Обновление, добавляющее новые обработчики, запускает регистрацию обработчиков (отдельно от установки приложения).
• Обновление, удаляющее обработчики, приводит к отмене регистрации обработчиков (отдельно от удаления приложения).

Отладка обработчика протокола в DevTools

Перейдите в раздел «Обработчики протоколов» через панель «Приложение» > «Манифест» . Здесь вы можете просмотреть и протестировать все доступные протоколы.

Например, установите этот демонстрационный PWA . В разделе « Обработчики протоколов» введите «американо» и нажмите «Проверить протокол» , чтобы открыть страницу кофе в PWA.

Демо

Вы можете увидеть демонстрацию регистрации обработчика протокола URL-адреса для PWA на Glitch.

1. Перейдите на https://protocol-handler.glitch.me/ , установите PWA и перезагрузите приложение после установки. Теперь браузер зарегистрировал PWA в качестве обработчика протокола web+coffee в операционной системе.
2. В установленном окне PWA нажмите на ссылку https://protocol-handler-link.glitch.me/ . Откроется новая вкладка браузера с тремя ссылками. Нажмите на первое или второе (латте макиато или американо). Браузер теперь покажет вам подсказку и спросит, согласны ли вы с тем, что приложение является обработчиком протокола web+coffee . Если вы согласны, PWA откроется и покажет выбранный кофе.
3. Чтобы сравнить с традиционным потоком, использующим navigator.registerProtocolHandler() , нажмите кнопку «Зарегистрировать обработчик протокола» в PWA. Затем во вкладке браузера нажмите третью ссылку (чай). Он также отобразит подсказку, но затем откроет PWA на вкладке, а не в окне браузера.
4. Отправьте себе сообщение в приложении для конкретной платформы, например Skype для Windows, со ссылкой типа <a href="web+coffee://americano">Americano</a> и щелкните ее. Он также должен открыть установленный PWA.

Соображения безопасности

Поскольку для установки PWA требуется безопасность контекста, обработка протокола наследует это ограничение. Список зарегистрированных обработчиков протоколов никоим образом не доступен в Интернете, поэтому его нельзя использовать в качестве вектора для снятия отпечатков пальцев.

Попытки навигации, не инициированные пользователем

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

Разрешенный список протоколов

Как и в случае с registerProtocolHandler() существует список разрешенных протоколов, которые приложения могут регистрировать для обработки.

Согласие

При первом запуске PWA из-за вызванного протокола пользователю будет представлено диалоговое окно разрешений. В этом диалоговом окне будет отображено имя приложения и его происхождение, а также задан вопрос, разрешено ли приложению обрабатывать ссылки из протокола. Если пользователь отклоняет диалоговое окно разрешения, зарегистрированный обработчик протокола будет игнорироваться операционной системой. Чтобы отменить регистрацию обработчика протокола, пользователю необходимо удалить PWA, которое его зарегистрировало. Браузер также отменит регистрацию обработчика протокола, если пользователь выберет «Запомнить мой выбор» и выберет «Запретить».

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

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

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

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

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

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

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

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

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

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

• Объяснитель
• Проект спецификации
• GitHub
• ChromeStatus
• Ошибка хрома
• Обзор тегов
• Дискурс

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

Регистрация обработчика протокола URL-адреса для PWA была реализована и указана Фабио Роча , Диего Гонсалесом , Коннором Муди и Сэмюэлем Тангом из команды Microsoft Edge. Эту статью рецензировали Джо Медли и Фабио Роча. Героическое изображение Джей Джей Ин на Unsplash .