Устанавливайте веб-приложения с помощью нового HTML-элемента `install`.

Patrick Brosset

Опубликовано: 12 мая 2026 г.

Для установки веб-приложений всегда требовался JavaScript. При использовании события beforeinstallprompt процесс установки полностью осуществляется в скрипте. Новый элемент <install> меняет это: добавьте на страницу один HTML-элемент, и браузер отобразит для вас кнопку «Установить», не требующую JavaScript.

Команда разработчиков Microsoft Edge в сотрудничестве с командой Chrome реализовала элемент <install> в Chromium. Теперь его можно протестировать, используя флаг в Chrome или Edge, начиная с версии 148, а также в качестве пробной версии Origin , которую можно использовать в обоих браузерах, начиная с версии 148 и заканчивая 153.

Попробуйте и узнайте, чем он отличается от императивного API веб-установки ( navigator.install() ), для которого существует собственная пробная версия .

Проблема

Установка веб-приложений фрагментирована. Каждый браузер имеет свой собственный набор точек входа, например, значки в адресной строке, пункты меню и подсказки. Разработчики имеют ограниченный контроль над тем, когда и как отображается процесс установки.

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

Элемент <install>

Содержимое и внешний вид нового HTML-элемента <install> контролируются браузером. Подобно другим элементам, содержащим разрешения, таким как <geolocation> , контроль браузера над текстом, языком и внешним видом кнопки означает, что он может считать клик пользователя подлинным сигналом намерения.

Пользователь, нажавший кнопку «Установить замечательное приложение», вряд ли удивится, когда появится запрос на установку.

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

Установите текущее приложение

Если текущая страница ссылается на манифест, содержащий поле id , то вам достаточно одного элемента:

<install></install>

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

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

Чтобы установить веб-приложение, находящееся в другом домене, отличном от текущего, используйте атрибут installurl , чтобы указать путь к другому веб-приложению:

<install installurl="https://awesome-app.com/"></install>

Если страница по адресу https://awesome-app.com ссылается на манифест, в котором определено поле id , то это всё, что вам нужно сделать.

Если поле id отсутствует, используйте атрибут manifestid для указания вычисляемого идентификатора id :

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

Чтобы получить вычисленный id манифеста:

1. Откройте инструменты разработчика.
2. Перейдите на вкладку «Приложение» .
3. В разделе «Идентификация» скопируйте значение вычисленного идентификатора приложения .

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

Предоставить резервный контент

Если браузер не поддерживает элемент <install> , отобразится любой HTML-код, помещенный внутрь этого элемента:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

Обнаружить поддержку

Если резервного контента недостаточно для вашего случая, и вы предпочитаете реализовать другой пользовательский интерфейс в браузерах, которые не поддерживают элемент <install> , используйте JavaScript для определения поддержки:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

Обработка событий

Элемент <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', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

Попробуйте сегодня!

Чтобы опробовать элемент <install> сегодня, у вас есть два варианта:

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

Протестируйте локально.

Чтобы протестировать элемент на своем устройстве уже сегодня:

1. Используйте Chrome или Edge версии 148 или более поздней.
2. Откройте в новой вкладке страницу about://flags/#web-app-install-element .
3. Установите для элемента «Установка веб-приложения» значение «Включено» .
4. Перезапустите браузер.

Протестируйте на своем рабочем сайте, используя пробную версию.

Пробный период позволяет реальным пользователям на вашем рабочем сайте использовать эту функцию без предварительного включения соответствующего флага.

1. Откройте страницу регистрации пробной версии элемента origin <install> .
2. Войти.
3. Нажмите «Зарегистрироваться» .
4. Укажите источник вашего сайта и заполните остальную часть формы.
5. После отправки формы вы получите строковый токен.
6. Добавьте токен на страницы вашего сайта, используя тег <meta> :

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

В качестве альтернативы вы можете отправить токен в заголовке HTTP-ответа:

Origin-Trial: YOUR_TOKEN_HERE

Пробная версия Origin доступна для Chrome и Edge в версиях с 148 по 153, и один и тот же токен будет работать в обоих браузерах. Для получения дополнительной информации о пробных версиях Origin см.:

• Начните работу с пробной версией Origin для Chrome.
• Протестируйте экспериментальные API и функции, используя пробные версии Origin для Edge.

Посмотрите, как это работает.

Ознакомьтесь с демоверсией Element Store <install> — каталогом PWA, который использует элемент <install> для установки нескольких примеров приложений.

Сравнение с API веб-установки

Элемент <install> — не единственный способ, которым мы экспериментируем с улучшением установки приложений в веб-браузере.

Ранее мы экспериментировали с API веб-установки ( navigator.install() ), который представляет собой императивный JavaScript API, позволяющий вашему сайту запускать установку веб-приложений как из одного, так и из разных источников. Подробнее см. статью «API веб-установки готов к тестированию» .

API веб-установки также имеет собственную пробную версию .

Вот как можно сравнить эти два подхода:

Поделитесь своим мнением.

Мы активно собираем отзывы по обоим подходам. В зависимости от ваших потребностей, мы можем добавить поддержку элемента <install> , или API navigator.install() , или и того, и другого.

Чтобы оставить отзыв об элементе <install> , создайте заявку в репозитории WICG, посвященном этому предложению .

Чтобы оставить отзыв об API navigator.install() , добавьте комментарий к записи «Отзывы разработчиков: проблема с элементом navigator.install против <install> » .

Ресурсы

• Пояснение: элемент <install>
• Демонстрация: хранилище элементов <install>
• Инструкция по использованию и демонстрационный источник
• Запись о состоянии платформы Chrome
• API веб-установки готов к тестированию (блог Edge)
• Пояснение к API веб-установки