Сделайте его доступным для установки

Пит ЛеПейдж

Прослушивание события 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;
});

Дальнейшее чтение

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

Вот некоторые дополнительные действия, которые вы можете выполнить: