PWA как обработчики URL-адресов

Разрешите установленным PWA обрабатывать URL-адреса для более интегрированного взаимодействия.

Thomas Steiner

Что такое PWA в качестве обработчиков URL-адресов?

Представьте, что вы общаетесь с другом с помощью приложения для обмена мгновенными сообщениями, такого как «Сообщения» в macOS, и говорите о музыке. Далее представьте, что на ваших устройствах установлен PWA music.example.com . Если вы хотите поделиться своим любимым треком с другом, вы можете отправить ему глубокую ссылку, например https://music.example.com/rick-astley/never-gonna-give-you-up . Поскольку эта ссылка довольно длинная, возможно, разработчики music.example.com решили добавить к каждому треку дополнительную короткую ссылку, как, например, https://🎵.example.com/ra/nggyu .

PWA в качестве обработчиков URL-адресов позволяет таким приложениям, как music.example.com , регистрироваться в качестве обработчиков URL-адресов для URL-адресов, соответствующих таким шаблонам, как https://music.example.com , https://*.music.example.com или https://🎵.example.com , чтобы ссылки из-за пределов PWA, например из приложения для обмена мгновенными сообщениями или почтового клиента, открывались в установленном PWA, а не во вкладке браузера.

PWA как обработчики URL-адресов состоит из двух дополнений:

1. Член манифеста веб-приложения "url_handlers" .
2. Формат файла web-app-origin-association для проверки ассоциаций URL-адресов внутри и за пределами области действия.

Предлагаемые варианты использования PWA в качестве обработчиков URL-адресов

Примеры сайтов, которые могут использовать этот API:

• Сайты потоковой передачи музыки или видео, поэтому ссылки на треки или ссылки на плейлисты открываются в интерфейсе проигрывателя приложения.
• Читатели новостей или RSS, на которые вы следили или подписались на сайты, открываются в режиме чтения приложения.

Как использовать PWA в качестве обработчиков URL-адресов

Включение через about://flags

Чтобы поэкспериментировать с PWA в качестве обработчиков URL-адресов локально, без пробного токена источника, включите флаг #enable-desktop-pwas-url-handling в about://flags .

Член манифеста веб-приложения "url_handlers"

Чтобы связать установленное PWA с шаблонами URL-адресов, эти шаблоны необходимо указать в манифесте веб-приложения. Это происходит через член "url_handlers" . Он принимает массив объектов со свойством origin , которое представляет собой обязательную string , являющуюся шаблоном для сопоставления источников. Эти шаблоны могут иметь префикс подстановочного знака ( * ), чтобы включить несколько поддоменов (например https://*.example.com ). URL-адреса, соответствующие этим источникам, могут обрабатываться этим веб-приложением. Всегда предполагается, что схема https:// , но ее необходимо указать явно.

В приведенном ниже фрагменте манифеста веб-приложения показано, как это можно настроить в примере музыкального PWA из вводного абзаца. Вторая запись с подстановочным знаком ( "https://*.music.example.com" ) гарантирует, что приложение также будет активировано для https://www.music.example.com или потенциальных других примеров, таких как https://marketing-activity.music.example.com .

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Файл web-app-origin-association

Поскольку PWA находится в другом источнике ( music.example.com ), чем некоторые URL-адреса, которые ему необходимо обрабатывать (например, https://🎵.example.com ), приложению необходимо подтвердить право собственности на эти другие источники. Это происходит в файле web-app-origin-association размещенном в других источниках.

Этот файл должен содержать действительный JSON. Структура верхнего уровня представляет собой объект с членом с именем "web_apps" . Этот член представляет собой массив объектов, и каждый объект представляет собой запись уникального веб-приложения. Каждый объект содержит:

Каждый объект "details" содержит:

Ниже приведен пример файла web-app-origin-association для примера музыкального PWA, приведенного выше. Он будет размещен в источнике 🎵.example.com и установит связь с PWA music.example.com , идентифицируемым по URL-адресу манифеста веб-приложения.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Когда URL-адрес совпадает?

PWA соответствует URL-адресу для обработки, если выполнены оба следующих условия:

• URL-адрес соответствует одной из исходных строк в "url_handlers" .
• Браузер может проверить через соответствующий файл web-app-origin-association , что каждый источник согласен разрешить этому приложению обрабатывать такой URL-адрес.

Об обнаружении файла web-app-origin-association

Чтобы браузер мог обнаружить файл web-app-origin-association , разработчикам необходимо поместить файл web-app-origin-association в папку /.well-known/ в корне приложения. Чтобы это работало, имя файла должно быть точно таким же web-app-origin-association .

Демо

Чтобы протестировать PWA в качестве обработчиков URL-адресов, обязательно установите флаг браузера, как описано выше, а затем установите PWA по адресу https://mandymsft.github.io/pwa/ . Посмотрев манифест веб-приложения , вы увидите, что оно обрабатывает URL-адреса со следующими шаблонами URL-адресов: https://mandymsft.github.io и https://luhuangmsft.github.io . Поскольку последний имеет другое происхождение ( luhuangmsft.github.io ), чем PWA, PWA на mandymsft.github.io необходимо доказать право собственности, что происходит через файл web-app-origin-association , размещенный по адресу https://. luhuangmsft.github.io/.well-known/web-app-origin-association .

Чтобы проверить, действительно ли оно работает, отправьте себе тестовое сообщение с помощью приложения для обмена мгновенными сообщениями по вашему выбору или электронное письмо, просмотренное в почтовом клиенте, который не является веб-интерфейсом, например Mail на macOS. Электронное письмо или текстовое сообщение должно содержать одну из ссылок https://mandymsft.github.io или https://luhuangmsft.github.io . Оба должны открыться в установленном PWA.

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

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

Пользовательский контроль

Если более одного PWA регистрируется в качестве обработчика URL-адресов для данного шаблона URL-адреса, пользователю будет предложено выбрать, с каким PWA он хочет обрабатывать этот шаблон — если таковой имеется вообще. Это предложение не обрабатывает навигацию, начинающуюся на вкладке браузера, оно явно нацелено на навигацию, начинающуюся за пределами браузера.

Прозрачность

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

Приложения для конкретных платформ уже могут использовать API-интерфейсы операционной системы для перечисления установленных приложений в системе пользователя. Например, приложения в Windows могут использовать API FindAppUriHandlersAsync для перечисления обработчиков URL-адресов. Если PWA зарегистрируются как обработчики URL-адресов на уровне ОС в Windows, их присутствие будет видно другим приложениям.

Сохранение разрешений

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

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

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

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

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

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

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

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

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

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

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

• Публичный объяснитель
• Демо | Демо-исходник
• Ошибка отслеживания в Chrome
• Запись ChromeStatus.com
• Компонент Blink: UI>Browser>WebAppInstalls
• Обзор тегов
• Документация Майкрософт

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

PWA в качестве обработчиков URL-адресов были определены и реализованы Лу Хуангом и Мэнди Чен из команды Microsoft Edge. Эта статья была рассмотрена Джо Медли . Изображение героя, созданное Брайсоном Хаммером на Unsplash .