Подсказка по установке

Пользователи могут быть не знакомы с процессом установки PWA. Как разработчик, вы поймете, когда настало время предложить пользователю установить приложение. Запросы на установку браузера по умолчанию также могут быть улучшены. Давайте проверим доступные инструменты.

Улучшение диалога установки

Браузеры предоставляют запросы на установку по умолчанию, когда PWA соответствуют критериям установки. Браузер использует свойства name и icons из манифеста вашего веб-приложения для создания приглашения.

Запрос на установку Microsoft Edge.

Некоторые браузеры улучшают процесс установки, используя рекламные поля в манифесте , включая description , categories и screenshots . Например, при использовании Chrome на Android, если ваш PWA предоставляет значения для полей description и screenshots , диалоговое окно установки преобразуется из небольшой информационной панели «Добавить на главный экран» в более крупное и подробное диалоговое окно, похожее на приглашения на установку из приложения. магазин.

Посмотрите рекламные поля в действии:

Событие beforeinstallprompt

Запросы на установку браузера — это первый шаг к тому, чтобы пользователи установили PWA. Чтобы реализовать собственный опыт установки, ваше приложение все равно должно соответствовать критериям установки: когда браузер обнаруживает, что ваше приложение можно установить, он запускает событие beforeinstallprompt . Вам необходимо реализовать этот обработчик событий, чтобы настроить взаимодействие с пользователем. Вот как:

  1. Прослушайте событие beforeinstallprompt .
  2. Сохраните его (он понадобится вам позже).
  3. Запустите его из вашего пользовательского интерфейса.

В приведенном ниже коде приведен пример прослушивателя событий beforeinstallprompt , его захвата и последующего индивидуального использования.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Затем, если пользователь нажмет вашу настроенную кнопку установки, используйте deferredPrompt , который был ранее сохранен, и вызовите его метод prompt() , поскольку пользователю все равно нужно пройти через процесс браузера, чтобы установить ваше приложение. Вы отложили событие до тех пор, пока не предоставили пользователю правильный контекст, побуждающий его установить PWA.

Захват события дает вам возможность добавлять подсказки и стимулы для ваших пользователей установить ваше приложение, а также выбрать запрос на установку, когда вы знаете, что пользователи более заинтересованы.

Событие не сработает, если:

  • Пользователь уже установил текущую версию PWA (действительно только для настольных компьютеров и WebAPK на Android).
  • Приложение не соответствует критериям установки PWA .
  • PWA невозможно установить на текущее устройство по другим причинам (например, устройство в режиме киоска или без разрешений).

Лучшее место для подсказок

Куда запрашивать, зависит от вашего приложения и от того, когда ваши пользователи больше всего интересуются вашим контентом и услугами. Записав beforeinstallprompt , вы сможете рассказать пользователям о причинах продолжать использовать ваше приложение и о преимуществах, которые они получат от его установки. Вы можете отображать подсказки по установке в любом месте вашего приложения. Некоторые распространенные шаблоны: в боковом меню, после критического действия пользователя, например завершения заказа, или после страницы регистрации. Подробнее об этом можно прочитать в разделе «Шаблоны для продвижения установки PWA» .

Сбор аналитики

Использование аналитики поможет вам лучше понять, где и когда представлять свои подсказки. Вы можете использовать свойство userChoice из события beforeinstallprompt ; userChoice — это обещание, которое будет выполнено в соответствии с действием, предпринятым пользователем.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Посмотрите это в действии

Попробуйте следующий пример в действии в браузере Chromium (на компьютере или Android).

Отступать

Если браузер не поддерживает beforeinstallprompt или событие не срабатывает, другого способа вызвать приглашение на установку браузера не существует. Однако на платформах, которые позволяют пользователю устанавливать PWA вручную, например iOS, вы можете отображать эти инструкции пользователю.

Вам следует отображать эти инструкции только в режиме браузера; другие варианты отображения, такие как standalone или fullscreen , означают, что пользователь уже установил приложение.

Чтобы отобразить элемент только в режиме браузера, используйте медиа display-mode : 

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Кодлаб

Библиотеки

Ознакомьтесь с этими библиотеками, чтобы получить помощь в отображении пользовательского приглашения на установку:

Ресурсы