Как сделать приложение устанавливаемым

Pete LePage

Прослушивание события beforeinstallprompt

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

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

  1. Нажмите Создать ремикс, чтобы сделать проект редактируемым.
  2. Добавьте обработчик событий beforeinstallprompt в объект window.
  3. Сохраните event как глобальную переменную. Она понадобится позже, чтобы показать запрос.
  4. Покажите кнопку установки.

Код:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

Обработка нажатия кнопки установки

Чтобы показать запрос на установку, вызовите prompt() для сохраненного события beforeinstallprompt. Метод prompt() вызывается в обработчике нажатия кнопки установки, поскольку prompt() должен вызываться в результате жеста пользователя.

  1. Добавьте обработчик событий клика для кнопки установки.
  2. Вызовите prompt() для сохраненного события beforeinstallprompt.
  3. Запишите результаты запроса.
  4. Установите для сохраненного события beforeinstallprompt значение null.
  5. Скрыть кнопку установки.

Код:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

Отслеживание события установки

Установка веб-приложения с помощью кнопки установки – это лишь один из способов, которым пользователи могут его установить. Также можно использовать меню Chrome, мини-панель и значок в омнибоксе. Вы можете отслеживать все эти способы установки, прослушивая событие appinstalled.

  1. Добавьте обработчик событий appinstalled в объект window.
  2. Зарегистрируйте событие установки в аналитике или другом механизме.

Код:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Дополнительные сведения

Поздравляем! Теперь ваше приложение можно установить.

Вот что ещё можно сделать: