Изменения, которые необходимо добавить в поведение главного экрана

С тех пор, как мы впервые запустили баннер добавления на главный экран, мы работали над тем, чтобы более четко обозначать прогрессивные веб-приложения и упрощать способ их установки пользователями. Наша конечная цель — предоставить кнопку установки в омнибоксе на всех платформах, и в Chrome 68 мы вносим изменения для достижения этой цели.

Что меняется?

Начиная с Chrome 68 на Android (стабильная версия выпущена в июле 2018 г.), Chrome больше не будет отображать баннер добавления на главный экран. Если сайт соответствует критериям добавления на главный экран , Chrome отобразит мини-информационную панель. Затем, если пользователь нажмет на мини-информационную панель или вы вызовете prompt() для события beforeinstallprompt из пользовательского жеста, Chrome отобразит модальное диалоговое окно добавления на главный экран.

Баннер A2HS Chrome 67 и более ранних версий

Скриншот баннера A2HS

Отображается автоматически, когда сайт соответствует критериям добавления на главный экран и сайт не вызывает preventDefault() в событии beforeinstallprompt

ИЛИ

Отображается вызовом prompt() в событии beforeinstallprompt .

Мини-информационная панель Chrome 68 и новее

Скриншот информационной панели A2HS
Отображается, когда сайт соответствует критериям добавления на главный экран.

Если пользователь отклонил его, он не будет отображаться до тех пор, пока не пройдет достаточный период времени (~ 3 месяца).

Отображается независимо от того, была ли вызвана preventDefault() для события beforeinstallprompt .

Эта обработка пользовательского интерфейса будет удалена в будущей версии Chrome, когда появится кнопка установки омнибокса.

Диалог A2HS

Скриншот диалогового окна A2HS

Отображается путем вызова prompt() из пользовательского жеста в событии beforeinstallprompt в Chrome 68 и более поздних версиях.

ИЛИ

Отображается, когда пользователь нажимает мини-информационную панель в Chrome 68 и более поздних версиях.

ИЛИ

Отображается после того, как пользователь нажимает «Добавить на главный экран» в меню Chrome во всех версиях Chrome.

Мини-информационная панель

Скриншот мини-информационной панели.
Мини-информационная панель

Мини-информационная панель является компонентом пользовательского интерфейса Chrome и не контролируется сайтом, но пользователь может легко ее закрыть. После закрытия пользователем он не появится снова, пока не пройдет достаточное количество времени (в настоящее время 3 месяца). Мини-информационная панель появится, когда сайт соответствует критериям добавления на главный экран , независимо от того, используете ли вы preventDefault() в событии beforeinstallprompt или нет.

Ранняя концепция кнопки установки в омнибоксе.
Ранняя концепция кнопки установки в омнибоксе
Мини-информационная панель — это временная версия Chrome на Android, поскольку мы работаем над созданием единообразной среды для всех платформ, включающей кнопку установки в омнибокс. ## Запуск диалогового окна добавления на главный экран
Кнопка «Установить» в прогрессивном веб-приложении для настольных компьютеров.
Кнопка «Установить» в настольном прогрессивном веб-приложении

Вместо запроса пользователя при загрузке страницы ( антишаблон для запросов разрешений ) вы можете указать, что ваше приложение можно установить с помощью некоторого пользовательского интерфейса, который затем отобразит модальное приглашение на установку. Например, этот настольный PWA добавляет кнопку «Установить приложение» прямо над именем профиля пользователя.

Предложение установить приложение по жесту пользователя кажется пользователю менее спамным и увеличивает вероятность того, что он нажмет «Добавить» вместо «Отменить». Включение кнопки «Установить» в ваше приложение означает, что даже если пользователь решит не устанавливать ваше приложение сегодня, кнопка все равно будет там завтра или тогда, когда он будет готов к установке.

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

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

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Событие beforeinstallprompt не будет запущено, если приложение уже установлено (см. критерии добавления на главный экран ). Но если позже пользователь удалит приложение, событие beforeinstallprompt снова будет запущено при навигации по каждой странице.

Отображение диалога с помощью prompt()

Добавить на главный экран диалоговое окно.
Диалоговое окно «Добавить на главный экран»

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

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

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

Дополнительные ресурсы

Ознакомьтесь с баннерами установки приложений для получения дополнительной информации, в том числе:

  • Подробности о событии beforeinstallprompt
  • Отслеживание реакции пользователя на приглашение добавить главный экран
  • Отслеживание установки приложения
  • Определение того, работает ли ваше приложение как установленное.