Этот глюк содержит веб-манифест с необходимыми полями для установки веб-приложения.
Он также имеет кнопку установки, которая по умолчанию скрыта.
Слушайте событие beforeinstallprompt
Когда браузер запускает событие beforeinstallprompt
, это указывает на то, что веб-приложение можно установить, и пользователю может быть показана кнопка установки. Событие beforeinstallprompt
вызывается, когда приложение соответствует критериям возможности установки .
Регистрация события позволяет разработчикам настраивать установку и предлагать пользователю выполнить установку, когда он считает, что это лучшее время.
- Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
- Добавьте обработчик событий
beforeinstallprompt
к объектуwindow
. - Сохраните
event
как глобальную переменную; оно понадобится нам позже, чтобы показать подсказку. - Отобразите кнопку установки.
Код:
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()
должен вызываться жестом пользователя.
- Добавьте обработчик события клика для кнопки установки.
- Вызов
prompt()
для сохраненного событияbeforeinstallprompt
. - Запишите результаты запроса.
- Установите для сохраненного события
beforeinstallprompt
значение null. - Скрыть кнопку установки.
Код:
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
.
- Добавьте обработчик событий
appinstalled
к объектуwindow
. - Зарегистрируйте событие установки в аналитике или другом механизме.
Код:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Дальнейшее чтение
Поздравляем, ваше приложение теперь можно установить!
Вот некоторые дополнительные действия, которые вы можете сделать: