Window: событие beforeinstallprompt

Событие beforeinstallprompt срабатывает, когда браузер обнаруживает, что веб-сайт может быть установлен как прогрессивное веб-приложение.

Нет гарантии, когда это событие будет вызываться, но обычно это происходит при загрузке страницы.

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

В этом случае обработчик этого события будет:

• Сохранять ссылку на объект BeforeInstallPromptEvent, переданный в него
• Отображать свой пользовательский интерфейс для установки (он должен быть скрыт по умолчанию, так как не все браузеры поддерживают установку).

Когда пользователь использует пользовательский интерфейс для установки приложения, пользовательский интерфейс вызывает метод prompt() сохраненного объекта BeforeInstallPromptEvent для отображения запроса на установку.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("beforeinstallprompt", (event) => {});

onbeforeinstallprompt = (event) => {};

Объект BeforeInstallPromptEvent. Наследует от Event.

Наследует свойства от родителя, Event.

BeforeInstallPromptEvent.platforms Только для чтения Нестандартный Экспериментальный

Возвращает массив строк, содержащих платформы, на которых было отправлено событие. Это предоставляется для пользовательских агентов, которые хотят предоставить пользователю выбор версий, таких как, например, "web" или "play", что позволит пользователю выбрать между веб-версией или версией для Android.

BeforeInstallPromptEvent.userChoice Только для чтения Нестандартный Экспериментальный

Возвращает Promise, который разрешается до объекта, описывающего выбор пользователя при запросе установки приложения.

BeforeInstallPromptEvent.prompt() Нестандартный Экспериментальный

Отображает запрос пользователя на установку приложения. Этот метод возвращает Promise, который разрешается до объекта, описывающего выбор пользователя при запросе установки приложения.

В следующем примере приложение предоставляет собственную кнопку установки, которая имеет id "install". Изначально кнопка скрыта.

<button id="install" hidden>Install</button>

Обработчик beforeinstallprompt:

• Отменяет событие, что предотвращает отображение браузером собственного пользовательского интерфейса установки на некоторых платформах
• Присваивает объект BeforeInstallPromptEvent переменной, чтобы его можно было использовать позже
• Отображает кнопку установки приложения.

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

При нажатии кнопки установки приложения:

• Вызывает метод prompt() сохраненного объекта события, чтобы инициировать запрос на установку.
• Возвращает свое состояние, очищая переменную installPrompt и снова скрывая себя.

installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  installPrompt = null;
  installButton.setAttribute("hidden", "");
});

• BeforeInstallPromptEvent.prompt
• BeforeInstallPromptEvent