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

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

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

Когда браузер запускает событие 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;
});

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

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

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