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 для примера music PWA из вышеприведенного примера приведен ниже. Он будет размещен на origin 🎵.example.com и устанавливает связь с music.example.com PWA, идентифицированным по его 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 в поле Components .

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

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

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

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

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

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

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