Пусть установленные PWA обрабатывают URL-адреса для более интегрированного взаимодействия.
Что такое 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-адресов, соответствующих шаблонам типа https://music.example.com , https://*.music.example.com или https://🎵.example.com , чтобы ссылки извне PWA, например, из мессенджера или почтового клиента, открывались в установленном PWA, а не во вкладке браузера.
В состав PWA в качестве обработчика URL-адресов входят два дополнения:
- Член манифеста веб-приложения
"url_handlers". - Формат файла
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" . Этот член представляет собой массив объектов, и каждый объект представляет собой запись для уникального веб-приложения. Каждый объект содержит:
| Поле | Описание | Тип | По умолчанию |
|---|---|---|---|
"manifest" | (Обязательно) URL-строка манифеста веб-приложения соответствующего PWA. | string | Н/Д |
"details" | (Необязательно) Объект, содержащий массивы включенных и исключенных шаблонов URL-адресов. | object | Н/Д |
Каждый объект "details" содержит:
| Поле | Описание | Тип | По умолчанию |
|---|---|---|---|
"paths" | (Необязательно) Массив допустимых строк пути | string[] | [] |
"exclude_paths" | (Необязательно) Массив запрещенных строковых путей | string[] | [] |
Ниже приведён пример файла web-app-origin-association для примера музыкального PWA, приведённого выше. Он размещается на сервере origin 🎵.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 , разработчикам необходимо разместить этот файл в папке /.well-known/ в корневом каталоге приложения. Для этого имя файла должно быть точно таким же: web-app-origin-association web-app-origin-association .
Демо
Чтобы протестировать PWA в качестве обработчиков URL-адресов, обязательно установите флаг браузера , как описано, а затем установите PWA по адресу https://mandymsft.github.io/pwa/ . Просмотрев манифест веб-приложения , вы увидите, что оно обрабатывает 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-адресов, используя основные принципы, изложенные в документе «Контроль доступа к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику.
Управление пользователем
Если для заданного шаблона URL-адреса зарегистрировано более одного PWA, пользователю будет предложено выбрать, с помощью какого 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 - Обзор TAG
- документация Microsoft
Благодарности
Использование PWA в качестве обработчиков URL-адресов было описано и реализовано Лу Хуангом и Мэнди Чен из команды Microsoft Edge. Данный документ был проверен Джо Медли .