HTML <install> — Chrome тестирует установку PWA без JavaScript

Chrome начал тестировать новый HTML-элемент <install>, который позволяет добавить на страницу системную кнопку установки PWA без сценария на beforeinstallprompt. Для разработчиков это может упростить установочный сценарий, а для пользователей — сделать кнопку установки заметнее и понятнее.

Почему это важно для PWA и веб-разработчиков

Google опубликовала материал Install web apps with the new HTML install element, в котором описала экспериментальный HTML-элемент <install>. Его идея проста: вместо того чтобы писать JavaScript-код для перехвата события beforeinstallprompt, разработчик добавляет в HTML один элемент, а браузер сам показывает доверенную кнопку установки.

На практике это выглядит так:

<install></install>

Если текущая страница ссылается на web app manifest с корректным id, браузер может отрисовать кнопку установки и запустить стандартный установочный сценарий после клика пользователя.

Главное отличие от привычного подхода в том, что внешний вид и текст кнопки контролирует браузер. Это важно для безопасности: пользователь видит системно понятный элемент, а не произвольную кнопку сайта, которая может вводить в заблуждение.

Что именно тестирует Chrome

Новый элемент реализован в Chromium командой Microsoft Edge совместно с командой Chrome. Сейчас он доступен для тестирования в Chrome и Edge версии 148 и выше: локально — через экспериментальный флаг, а на продакшен-сайтах — через Origin Trial для версий 148–153.

Это означает, что <install> пока нельзя считать готовым стандартом для массового использования. Его нужно воспринимать как ранний механизм, который браузерные команды хотят проверить на реальных сценариях и получить обратную связь от разработчиков.

Что было раньше

До появления <install> установка PWA чаще всего строилась вокруг события beforeinstallprompt. Упрощённо схема выглядела так:

браузер определяет, что сайт можно установить как PWA;
страница ловит событие beforeinstallprompt;
разработчик сохраняет событие в переменную;
пользователь нажимает кастомную кнопку «Установить»;
сайт вызывает prompt() и показывает системное окно установки.

Этот подход рабочий, но он требует JavaScript, аккуратной обработки состояний и понимания браузерных ограничений. Для небольших сайтов, каталогов, медиа и сервисов это лишняя сложность, особенно если нужна просто заметная кнопка установки.

MDN описывает классический сценарий установки PWA через manifest, HTTPS и beforeinstallprompt в руководстве Making PWAs installable.

Что меняется с <install>

Новый элемент делает установку более декларативной. Декларативный подход — это когда разработчик описывает намерение в разметке, а браузер сам решает, как безопасно и корректно выполнить действие.

Было

<button id="install">Установить приложение</button>

<script>
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  deferredPrompt = event;
});

document.querySelector('#install').addEventListener('click', async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
});
</script>

Может стать

<install></install>

Важно: это не отменяет требования к самой PWA. Приложению по-прежнему нужен корректный manifest, иконки, start_url, подходящий display-режим и безопасный контекст — обычно HTTPS.

Установка другого веб-приложения

Одна из самых интересных возможностей — установка приложения не только с текущей страницы, но и с другого origin. Для этого используется атрибут installurl:

<install installurl="https://example.com/"></install>

Такой сценарий особенно важен для каталогов веб-приложений. Например, сайт может показывать подборку PWA и для каждой карточки выводить отдельную системную кнопку установки.

Если у приложения нет явного id в manifest, может использоваться атрибут manifestid:

<install
  installurl="https://example.com/"
  manifestid="https://example.com/?source=pwa">
</install>

Microsoft Edge также опубликовала демонстрационный репозиторий pwa-install-element, где показаны базовые сценарии: установка текущего документа, установка другого документа, обработка событий и тестирование через флаг about://flags/#web-app-install-element.

Как проверить поддержку

Если простого fallback-контента недостаточно, поддержку можно проверить через HTMLInstallElement:

if ('HTMLInstallElement' in window) {
  // Браузер поддерживает <install>
} else {
  // Нужен запасной сценарий
}

Но ключевая идея нововведения как раз в том, что базовая кнопка установки больше не должна требовать JavaScript. Скрипт нужен только для дополнительной логики: аналитики, обработки результата или альтернативного интерфейса в неподдерживаемых браузерах.

Какие события доступны

Для более сложных сценариев <install> предусматривает события. Они позволяют понять, что произошло после взаимодействия пользователя с кнопкой:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (event) => {
  console.log(event.target.invalidReason);
});

Это полезно, если разработчику нужно отследить успешную установку, отказ пользователя или ошибку в данных установки.

Почему браузер сам контролирует кнопку

На первый взгляд может показаться странным, что браузер, а не сайт, управляет внешним видом и текстом элемента. Но именно в этом смысл эксперимента.

Установка приложения — чувствительное действие. После установки веб-приложение получает более заметное место в системе: иконку, отдельное окно, запуск из меню приложений или с рабочего стола. Поэтому браузеру важно убедиться, что пользователь понимает, что делает.

В WICG-репозитории install-element отдельно обсуждаются вопросы безопасности и приватности: cross-origin установка, корректное ожидание пользователя, ограничения для приватного режима и top-level-контекста.

Что это даст обычным пользователям

Для пользователя потенциальная выгода простая: меньше скрытых меню и больше понятных действий на странице.

Сейчас многие люди даже не знают, что сайт можно установить как приложение. Кнопка в адресной строке, меню браузера или случайный prompt легко теряются. Если <install> дойдёт до стабильной реализации, сайты смогут показывать установку в понятном месте: в шапке, на лендинге, в карточке приложения или после объяснения преимуществ.

Особенно это важно для сервисов, которыми пользуются регулярно: таск-менеджеров, почты, медиа, образовательных платформ, каталогов, CRM и внутренних корпоративных инструментов.

Что это даст разработчикам

Для разработчиков выгода более техническая:

Было	Может стать
Нужно ловить `beforeinstallprompt`	Достаточно добавить `<install>`
Кнопку рисует сайт	Кнопку контролирует браузер
Установка текущего PWA требует JS-логики	Базовый сценарий работает декларативно
Каталоги PWA сложнее реализовать	Возможна установка другого приложения через `installurl`
Много различий между браузерами	Появляется шанс на более единый UX

Главное преимущество — меньше кода для базового сценария. Но это не значит, что PWA станет устанавливаться автоматически. Решение всё равно остаётся за пользователем.

Как попробовать сегодня

Для локального тестирования нужен Chrome или Edge 148+.

Порядок проверки:

открыть about://flags/#web-app-install-element;
включить Web App Install Element;
перезапустить браузер;
добавить <install></install> на страницу PWA;
убедиться, что manifest содержит корректный id и другие обязательные поля.

Для тестирования на реальных пользователях нужен Origin Trial. Это механизм, при котором браузер временно включает экспериментальную возможность для конкретного сайта по специальному токену.

Что пока неизвестно

У <install> ещё есть открытые вопросы. Например:

как именно будет выглядеть финальная спецификация;
какие браузеры поддержат элемент, кроме Chromium-браузеров;
изменятся ли атрибуты installurl и manifestid;
как будет устроена аналитика успешной установки;
какие ограничения появятся для iframe, приватного режима и cross-origin сценариев.

Поэтому использовать <install> как основу критически важного функционала пока рано. Зато его уже можно изучать, тестировать в экспериментальной среде и учитывать при проектировании будущих PWA-интерфейсов.

Итог

<install> — маленький HTML-элемент с большим смыслом. Он показывает, что браузеры ищут более простой и безопасный способ установки веб-приложений без сложной JavaScript-обвязки.

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