Для веб-разработчиков лучшей практикой является проектирование приложений с использованием максимально надежной модели безопасности, например, прогрессивных веб-приложений (PWA). Такой подход максимизирует охват аудитории, минимизирует затраты на обеспечение безопасности и обеспечивает максимальную гибкость как для разработчиков, так и для пользователей. Однако, поскольку веб-среда по умолчанию спроектирована как безопасная, ее консервативная модель безопасности естественным образом ограничивает доступ к операционной системе и некоторым мощным API устройств.
Изолированные веб-приложения (IWA) решают эту проблему, предоставляя изолированную, упакованную, версионированную, подписанную и высоконадежную модель приложения, построенную на основе веб-платформы. Однако, прежде чем переходить к IWA, стоит рассмотреть более постепенный шаг: подключение вашего PWA к расширению Chrome. Доступный в управляемых средах ChromeOS — таких как управляемые пользовательские сессии, управляемые гостевые сессии (MGS) или режим киоска — этот метод позволяет вашему приложению использовать API расширений более низкого уровня посредством безопасной передачи сообщений. Следующая диаграмма иллюстрирует этот поэтапный подход: начиная со стандартного веб-приложения, добавляя возможности для превращения в устанавливаемое PWA и, наконец, исследуя путь PWA и расширения Chrome для разблокировки дополнительных API.
Если вашему приложению требуются расширенные возможности, недоступные даже через API расширений Chrome, такие как Controlled Frame или Direct Sockets API , то переход на изолированное веб-приложение (IWA) — ваш лучший вариант. Однако, хотя IWA открывают доступ к мощным новым веб-функциям, вам все еще могут потребоваться специфические API на уровне устройства, эксклюзивные для расширений Chrome, например, chrome.runtime.restart() для перезагрузки устройства ChromeOS в режиме киоска. К счастью, вы можете подключить IWA к расширению Chrome, используя тот же подход, что и для PWA. Этот метод описан в следующих шагах.
Пошаговая реализация
Разверните дополнительное расширение.
Расширения развертываются через консоль администратора Chrome. В зависимости от целевой среды, настройка выполняется в соответствующем разделе (например, перейдите в «Устройства» > «Chrome» > «Приложения и расширения» > «Киоски» для режима киоска или на соответствующие вкладки « Пользователи и браузеры» или «Управляемые гостевые сеансы »). Вы можете разместить расширение по общедоступной ссылке или напрямую в Chrome Web Store. Более подробные инструкции по управлению расширениями см. в официальной документации .
Реализовать передачу сообщений
Настройка расширения
Для получения сообщений от вашего веб-приложения и ответа на них, создайте фоновый скрипт, который будет прослушивать сообщения, поступающие от клиента (вашего веб-приложения), и затем перенаправлять эти запросы на соответствующий вызов API. В следующем примере запрос на перезапуск устройства ChromeOS перенаправляется через прокси-сервер, когда веб-приложение отправляет пользовательский объект сообщения, содержащий methodName со значением callRestart .
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
В манифесте расширения можно настроить разрешение внешних вызовов функций расширения с помощью ключа externally_connectable , который указывает, каким сайтам и расширениям разрешено вызывать методы расширения. Более подробную информацию о расширениях Chrome и манифесте версии 3 можно найти в официальной документации .
Если вы подключаетесь из прогрессивного веб-приложения (PWA), в массиве matches будет указан стандартный HTTPS-домен, на котором размещено ваше приложение. Вот пример манифеста, настроенного для PWA, работающего в режиме киоска:
Manifest.json
{
"manifest_version": 3,
"name": "Restart your kiosk app",
"version": "1.0",
"description": "This restarts your ChromeOS device.",
"background": {
"service_worker": "background.js"
},
"externally_connectable": {
"accepts_tls_channel_id": false,
"matches": [
"*://developer.chrome.com/*"
]
}
}
Если вы подключаетесь из изолированного веб-приложения (IWA), механизм остается тем же, но схема URL-адреса меняется. Поскольку IWA защищены от копирования и не работают на стандартных веб-серверах, они используют собственный протокол. Необходимо добавить источник IWA, используя схему isolated-app:// .
Manifest.json
{
"manifest_version": 3,
"name": "IWA Companion Extension",
"version": "1.1",
"description": "Companion extension for the IWA",
"background": {
"service_worker": "/scripts/background.js"
},
"externally_connectable": {
"matches": [
"isolated-app://*/*"
]
}
}
Это минимальный объем кода, необходимый в расширении для прослушивания сообщений от PWA или IWA.
Настройка PWA и IWA
Для вызова расширения из веб-приложения необходимо знать его статический идентификатор. Этот идентификатор можно найти на странице chrome://extensions , которая отображается при установке расширения Chrome, или в Chrome Web Store после загрузки расширения. Это позволяет вашему веб-приложению указать точное расширение, с которым нужно взаимодействовать. После этого вызовите метод chrome.runtime.sendMessage и передайте в него идентификатор расширения и сообщение для отправки расширению.
const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
methodName: method,
});
};
callExtensionAPI('callRestart');
Для получения дополнительной информации о подключении веб-приложений к расширениям для передачи сообщений обратитесь к документации по расширениям .
Демо
Чтобы увидеть эту реализацию в действии, изучите репозиторий IWA Kitchen Sink . Этот проект служит всеобъемлющей площадкой для демонстрации различных возможностей IWA, включая примеры работы с API с высоким уровнем доверия, такими как Direct Sockets и Controlled Frame. Он также предоставляет полный, работающий пример подключения IWA к расширению Chrome. Репозиторий включает в себя пример сопутствующего расширения и специальный веб-интерфейс, демонстрирующий, как использовать безопасную передачу сообщений для запуска методов, доступных только расширению. Например, вы можете протестировать получение информации о профиле пользователя с помощью API chrome.identity.getProfileUserInfo() непосредственно из изолированного веб-приложения.
Заключение
Подключение веб-приложений к расширению Chrome обеспечивает безопасный и поэтапный путь к раскрытию возможностей устройств, аналогичных нативным приложениям. При проектировании архитектуры вашего приложения учитывайте следующие ключевые моменты:
- Начните с веб-технологий: по умолчанию используйте PWA для максимального охвата аудитории и минимальных затрат на безопасность.
- Преодолейте разрыв с помощью расширений: для глубоко интегрированных функций на уровне ОС (например, перезагрузка устройства в режиме киоска) разверните сопутствующее расширение Chrome и подключите его к своему приложению с помощью защищенной передачи сообщений.
- Переходите на изолированные веб-приложения (IWA) только при необходимости: используйте изолированные веб-приложения, когда вам требуются API с высоким уровнем доверия, такие как прямые сокеты, управляемые фреймы или любые другие API, доступные только через IWA.