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

Pete LePage

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

Примечание. Бета- версия Chrome 68 вышла из стадии бета-тестирования. См. документацию «Добавить на главный экран», чтобы узнать о текущем поведении.

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

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

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

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

ИЛИ

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

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

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

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

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

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

Диалог 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 не будет запущено, если приложение уже установлено (см. критерии добавления на главный экран ). Но если позже пользователь удалит приложение, событие 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;
  });
});

Примечание. Хотя событие beforeinstallprompt может быть запущено без жеста пользователя, вызов prompt() требует его.

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

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

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

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