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

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

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

Thomas Steiner

Справочная информация о схемах (т.н. протоколах)

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

tel:+1-816-555-1212
mailto:[email protected]
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 .

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

Пользователь посещает сайт 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 . 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

Перейдите в раздел Protocol Handlers через панель Application > Manifest . Здесь вы можете просмотреть и протестировать все доступные протоколы.

Например, установите этот демо PWA . В разделе Protocol Handlers введите "americano" и нажмите Test protocol , чтобы открыть страницу кофе в PWA.

Обработчики протоколов на панели «Манифест»

Демо

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

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

Демонстрация обработчика протокола URL с вкладкой браузера со ссылками слева и отдельным окном PWA справа.

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

Поскольку установка 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. Эту статью рецензировали Джо Медли и Фабио Роча. Изображение героя от JJ Ying на Unsplash .