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

Пит ЛеПейдж

Этот глюк содержит веб-манифест с необходимыми полями для установки веб-приложения.

Он также имеет кнопку установки, которая по умолчанию скрыта.

Слушайте событие beforeinstallprompt

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

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

  1. Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
  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;
});

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

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

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