Да установится сайт!

— Обновлено
Appears in: Прогрессивные веб-приложения

В этом фрагменте на Glitch уже есть компоненты, необходимые, чтобы обеспечить возможность установки современного веб-приложения, в том числе — очень простой сервис-воркер и манифест веб-приложения. Там также есть кнопка установки, которая по умолчанию скрыта.

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

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

  1. Click Remix to Edit to make the project editable.

  2. Добавьте в объект window обработчик событий beforeinstallprompt.

  3. Сохраните event как глобальную переменную: она понадобится позже, чтобы показать запрос.

  4. Отобразите кнопку установки.

Код:

window.addEventListener('beforeinstallprompt', (event) => {
// Запрет показа информационной мини-панели на мобильных устройствах.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Убираем событие, чтобы его можно было активировать позже.
window.deferredPrompt = event;
// Убираем класс «hidden» из контейнера кнопки установки.
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) {
// Отложенный запрос недоступен.
return;
}
// Показать запрос на установку.
promptEvent.prompt();
// Записать результат в журнал.
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Сбросить переменную отложенного запроса:
// prompt() можно вызвать только один раз.
window.deferredPrompt = null;
// Скрыть кнопку установки.
divInstall.classList.toggle('hidden', true);
});

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

Использование кнопки установки — не единственный способ установить современное веб-приложение. Это можно сделать из меню Chrome, информационной мини-панели и с помощью значка в омнибоксе. Отслеживать все эти способы установки можно, прослушивая вызов appinstalled.

  1. Добавьте в объект window обработчик событий appinstalled.
  2. Запишите информацию о событии установки в инструмент аналитики или иным способом.

Код:

window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Очистить «deferredPrompt» для сборщика мусора
window.deferredPrompt = null;
});

Дополнительные материалы #

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

Что можно сделать еще:

Последнее обновление: Улучшить статью