Запрос на установку собственного приложения

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

Каковы критерии?

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

  • Ни веб-приложение, ни собственное приложение не установлены на устройстве.
  • Включает манифест веб-приложения , который включает в себя:
    • short_name
    • name (используется в подсказке баннера)
    • icons , включая версии 192 пикселей и 512 пикселей.
    • prefer_related_applications имеет true
    • объект related_applications с информацией о приложении
  • Подается через HTTPS

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

Обязательные свойства манифеста

Чтобы предложить пользователю установить ваше собственное приложение, вам необходимо добавить в манифест вашего веб-приложения два свойства: prefer_related_applications и related_applications .

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

Свойство prefer_related_applications указывает браузеру предлагать пользователю ваше собственное приложение вместо веб-приложения. Если вы оставите это значение неустановленным или false , браузер предложит пользователю вместо этого установить веб-приложение.

related_applications — это массив со списком объектов, которые сообщают браузеру о предпочитаемом вами родном приложении. Каждый объект должен включать свойство platform и свойство id . Где platform — play , а id — это идентификатор вашего приложения в Play Store.

Показать приглашение на установку

Чтобы отобразить диалог установки, вам необходимо:

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

Слушайте beforeinstallprompt

Если критерии соблюдены, Chrome создаст событие beforeinstallprompt . Вы можете использовать его, чтобы указать, что ваше приложение можно установить, а затем предложить пользователю установить его.

После запуска события beforeinstallprompt сохраните ссылку на это событие и обновите пользовательский интерфейс, чтобы указать, что пользователь может установить ваше приложение.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Сообщите пользователю, что ваше приложение можно установить

Лучший способ уведомить пользователя о возможности установки вашего приложения — добавить кнопку или другой элемент в пользовательский интерфейс. Не показывайте полностраничные межстраничные объявления или другие элементы, которые могут раздражать или отвлекать.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Показать подсказку

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

Затем послушайте обещание, возвращаемое свойством userChoice . Промис возвращает объект со свойством outcome после того, как было показано приглашение и пользователь ответил на него.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the 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 A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

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

Особые соображения при использовании политики безопасности контента

Если на вашем сайте действует ограничительная Политика безопасности контента , обязательно добавьте *.googleusercontent.com в директиву img-src , чтобы Chrome мог загрузить значок, связанный с вашим приложением, из Play Store.

В некоторых случаях *.googleusercontent.com может быть более подробным, чем хотелось бы. Это можно сузить, выполнив удаленную отладку устройства Android, чтобы определить URL-адрес значка приложения.