PWA - Запросить «добавить на главный экран», когда я хочу? - PullRequest
Новая
       7

PWA - Запросить «добавить на главный экран», когда я хочу?

1 голос
/ 16 апреля 2020

У меня есть приложение PWA, которое корректно предлагает пользователям добавить приложение на главный экран. Проблема в том, что ИМХО такое автоматическое c поведение - плохой пользовательский опыт, потому что в 90% случаев приглашение воспринимается как раздражающее всплывающее окно, а пользователи просто закрывают его.

То, что я считаю, намного лучше UX, пользователи могли бы найти способ «установить приложение», как в нижнем колонтитуле любой страницы, где вы обычно видите «Загрузить на Android» или «Получить приложение в App Store», или, после некоторого указания c Взаимодействует какое-то всплывающее окно, над которым я КОНТРОЛЬ появляюсь, КОГДА Я ЧУВСТВУЮ, что пользователь достаточно заинтересован в моем приложении и может быть заинтересован в сохранении его на главном экране.

Я провел несколько поисков и не смог найти любой способ вызвать всплывающее окно «добавить на главный экран», когда мне нужно. Я что-то пропустил? Как вы запрашиваете «добавить на домашний экран» второй или третий раз?

Ищете какое-либо решение на Android и iPhone.

1 Ответ

2 голосов
/ 16 апреля 2020

С Предоставление пользовательского опыта установки :

Чтобы указать, что ваше Progressive Web App можно установить, и предоставить пользовательский процесс установки в приложении:

  1. Прослушивание события beforeinstallprompt.
  2. Сохраните событие beforeinstallprompt, чтобы его можно было использовать для запуска процесса установки позже.
  3. Оповещение пользователя о том, что ваш PWA устанавливается и предоставляет кнопку или другой элемент для запуска процесса установки в приложении. 
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});

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

buttonInstall.addEventListener('click', (e) => {
  // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  })
});
...