Начиная с Chrome 122, вы можете подписаться на пробную версию компонента манифеста приложения scope_extensions , который позволяет сайтам, управляющим несколькими поддоменами и доменами верхнего уровня, отображаться как единое веб-приложение. В этом документе объясняется, почему команда Chrome внедряет эту функцию и когда вы можете захотеть ее использовать.
Обзор
Некоторые веб-приложения имеют несколько источников , например, example.com в качестве основного приложения, а затем space_1.example.com , …, space_n.example.com , иногда в сочетании со special-example.com , в качестве подсистем, все под общим названием основного приложения. Такая архитектура сайта имеет последствия в контексте прогрессивных веб-приложений (PWA). К ограничениям относятся невозможность совместного использования сервис-воркеров, любых типов устройств, локального хранилища и разрешений между источниками. Кроме того, кросс-доменная навигация в автономном PWA отображает окно пользовательского интерфейса («полоса вне области видимости»), указывающее на то, что пользователь вышел за пределы PWA. О том, как обойти некоторые из этих проблем, можно узнать в статьях «Прогрессивные веб-приложения на сайтах с несколькими источниками» и «Создание нескольких прогрессивных веб-приложений на одном домене» .
API расширения области действия позволяет веб-приложениям преодолеть некоторые проблемы, которые политика одного источника накладывает на архитектуру сайтов такого типа. Он позволяет веб-приложениям расширять свою область действия на другие источники, чтобы обеспечить единый пользовательский опыт при условии согласованности между основным источником веб-приложения и связанными с ним источниками.
Цели
Основная цель API Scope Extensions — позволить сайтам, контролирующим несколько поддоменов и доменов верхнего уровня, функционировать как единое веб-приложение с точки зрения пользовательского интерфейса и захвата ссылок. Например, позволить сайту example.com , охватывающему example.com.co.uk и support.example.com работать как можно более эффективно в рамках единого веб-приложения.
Расширения области видимости позволяют PWA, работающим из нескольких источников, функционировать как единое веб-приложение с точки зрения пользовательского интерфейса.
На практике это приводит к достижению двух более конкретных целей:
- Навигация между источниками: Позволяет пользователям переходить между связанными источниками без нарушения пользовательского опыта, вызывая всплывающее окно, информирующее пользователя о том, что он покидает PWA.
- Перехват междоменных ссылок: позволяет веб-приложениям перехватывать переходы пользователей на сайты, с которыми они связаны.
Междоменная навигация в пределах области видимости
По умолчанию, когда пользователи переходят с одного источника на другой в автономном PWA, им отображается окно интерфейса, указывающее на то, что они выходят за пределы PWA. В Chrome этот интерфейс представляет собой панель «вне области видимости», содержащую URL-адрес нового источника. Это нарушает пользовательский опыт, поскольку пользователи ожидают продолжить навигацию в рамках того же контекста приложения, но могут воспринимать это как выход за его пределы.
Панель «Вне области видимости» отображается в Chrome, когда пользователи переключаются между различными источниками в автономном PWA.
Благодаря расширению области действия (Scope Extensions) пользовательский интерфейс окна не будет отображаться при переходе пользователей на любой из связанных источников, поэтому PWA будет представлен как единое целое.
Перехват междоменных ссылок
Функция захвата ссылок (Link Capturing) подразумевает возможность приложения перехватывать ссылки в пределах своей области видимости. Способ реализации этой функции различается в зависимости от браузера и операционной системы. Например, в Chrome на ChromeOS ссылки в пределах области видимости установленного PWA по умолчанию открывают вкладку браузера с указанием в адресной строке, что существует приложение, способное обрабатывать эти ссылки, и позволяют пользователю включить автоматический захват ссылок с этого момента.
Фрагмент адресной строки вкладки Chrome в ChromeOS, отображающий визуальное подтверждение того, что ссылка может быть обработана PWA, и возможность запомнить это решение.
Если пользователь переходит по ссылке, находящейся за пределами области действия PWA (включая ссылки на поддомены или домены верхнего уровня), он не будет распознан как принадлежащий к нему. Например, ссылки будут открываться во вкладке браузера без каких-либо указаний пользователю о существовании приложения, способного обрабатывать эту ссылку. API расширения области действия позволяет расширить область действия PWA таким образом, чтобы связанные с ней источники рассматривались как ссылки, находящиеся в пределах области действия.
Выполнение
Для реализации расширения области действия необходимо установить связь между основным источником и связанными с ним источниками.
Укажите список связанных источников.
Добавьте элемент манифеста веб-приложения scope_extensions к основному источнику PWA, чтобы веб-приложение могло расширить свою область действия на другие источники.
Манифест веб-приложения (https://example.com)
{
"name": "Example",
"display": "standalone",
"start_url": "/index.html",
"scope_extensions": [
{ "origin": "https://*.example.com" },
{ "origin": "https://example.co.uk" },
{ "origin": "https://*.example.co.uk" }
]
}
Подтвердите взаимосвязи
Каждый из перечисленных источников подтверждает связь с веб-приложением с помощью конфигурационного файла /.well-known/web-app-origin-association . Этот файл должен называться web-app-origin-association и отображаться точно по этому адресу, поскольку это известный URI .
/.well-known/web-app-origin-association (associated origin)
{
"web_apps": [{ "web_app_identity": "https://example.com" }]
}
Демо
Демоверсия состоит из двух сайтов:
- Основной PWA : Фактический PWA, который объявляет список связанных источников через член
scope_extensionsв манифесте веб-приложения . - Источник в расширенной области видимости : Источник, находящийся за пределами области видимости основного PWA, но связанный с ним после того, как основной PWA указал его в качестве связанного источника и подтвердил связь через файл
web-app-origin-association.
Для выполнения следующих тестов необходимо включить флаг about://flags/#enable-desktop-pwas-scope-extensions (доступен начиная с Chrome версии 115).
Проверка кросс-доменной навигации
В качестве предварительного условия для этих тестов откройте основное PWA в браузере, установите его как PWA и запустите в автономном режиме. PWA содержит ссылки на источник, находящийся в расширенной области видимости , и на источник, не входящий в расширенную область видимости .
Демонстрационный PWA-файл со ссылками на источник в расширенной области видимости и источник вне расширенной области видимости.
Навигация по междоменным ссылкам по умолчанию (не входит в расширенную область видимости)
- Нажмите на ссылку на источник, не находящийся в расширенной области видимости, внутри полноэкранного PWA.
- В результате происходит навигация, и отображается панель, находящаяся вне области видимости.
Панель «Вне области видимости» отображается по умолчанию при междоменной навигации в автономном режиме PWA.
Междоменная навигация с использованием расширений области видимости (в расширенной области видимости)
- Вернитесь на главную страницу PWA.
- Нажмите на ссылку, чтобы перейти к источнику, не входящему в расширенную область действия .
- По умолчанию должна отображаться панель «вне области действия», но из-за связи с расширениями области действия она не отображается.
Панель «Вне области действия» не отображается в навигации между источниками после установления связи с источником с помощью расширений области действия.
Проверка захвата междоменных ссылок
- Откройте и установите основное PWA на устройство ChromeOS.
- Нажмите на следующую ссылку: associated origin .
- Ссылка открывается в новой вкладке браузера, и появляется запрос на открытие ссылки в установленном PWA.
При нажатии на ссылку, ведущую на соответствующий PWA-ресурс, ссылка открывается в новой вкладке и отображается значок «Открыть в приложении», позволяющий пользователю включить автоматическое перехватывание ссылок.
Испытание происхождения
Если вы хотите протестировать этот API в своем приложении в реальных условиях с реальными пользователями, вы можете сделать это с помощью пробной версии Origin . Пробные версии Origin позволяют вам опробовать экспериментальные функции с вашими пользователями, получив тестовый токен, привязанный к вашему домену. Затем вы можете развернуть свое приложение и ожидать, что оно будет работать в браузере, поддерживающем тестируемую функцию (в данном случае, она доступна в Chrome с 121 по 126). Чтобы получить собственный токен для запуска пробной версии Origin, заполните форму заявки .
Обратная связь
Команда Chrome ищет отзывы о полезности этого API. Чтобы помочь команде развивать этот API, учитывая отзывы о его полезности и новых вариантах использования, не охваченных текущей версией, создайте заявку на GitHub .
Дополнительные ресурсы
- API расширений области действия — пробная версия Origin
- Статус Chrome — Расширения области действия веб-приложения
- Расширение области действия веб-приложений: пояснение
- Намерение провести эксперимент
- Позиция Mozilla по стандартам
- Позиция Apple в отношении стандартов
- Ошибка Chromium
- Прогрессивные веб-приложения на сайтах с несколькими источниками
- Создание нескольких прогрессивных веб-приложений на одном домене
Благодарности
Особая благодарность команде разработчиков этого API. Расширения области действия были определены Аланом Каттером и Лу Хуангом при участии Мэтта Джуки . API был реализован Аланом Каттером из Google Chrome, а также Хасаном Талатом , Кристин Ли и Лу Хуангом из Microsoft Edge.