Эта страница переведена с помощью Cloud Translation API.

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

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

Thomas Steiner

Общая информация о схемах (или протоколах)

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

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

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

Подробная информация о методе `registerProtocolHandler()`

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

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

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

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

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

Что представляет собой обработка протоколов?

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

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

Варианты использования

В прогрессивном веб-приложении для обработки текста пользователь в документе видит ссылку на презентацию, например, web+presentations://deck2378465 . При нажатии на ссылку презентация автоматически открывается в нужном окне и отображает набор слайдов.
В чат-приложении, предназначенном для конкретной платформы, пользователь в сообщении получает ссылку на magnet -ссылку. При нажатии на ссылку запускается установленное 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 требуется безопасный контекст, обработка протоколов наследует это ограничение. Список зарегистрированных обработчиков протоколов никак не доступен из сети, поэтому его нельзя использовать в качестве вектора идентификации.

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

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

Список разрешенных протоколов

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

Запрос согласия

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

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

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

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

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

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

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

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

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

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

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

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

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