BeforeInstallPromptEvent

Интерфейс BeforeInstallPromptEvent — интерфейс события beforeinstallprompt, срабатывающего в объекте Window перед тем, как пользователя попросят добавить сайт в закладки на мобильном устройстве.

Этот интерфейс наследуется от интерфейса Event.

BeforeInstallPromptEvent() Нестандартно Экспериментально

Создаёт новый объект BeforeInstallPromptEvent.

Наследует свойства от родительского класса 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", "");
});

• Делаем PWA устанавливаемыми
• Как предоставить собственный опыт установки в приложении на web.dev (2021)