С тех пор, как мы впервые запустили баннер добавления на главный экран, мы работали над тем, чтобы более четко обозначить прогрессивные веб-приложения и упростить пользователям способ их установки. Наша конечная цель — предоставить кнопку установки в омнибоксе на всех платформах, и в 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 или нет.
Вместо запроса пользователя при загрузке страницы ( антишаблон для запросов разрешений ) вы можете указать, что ваше приложение можно установить с помощью некоторого пользовательского интерфейса, который затем отобразит модальное приглашение на установку. Например, этот настольный 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 - Отслеживание реакции пользователя на приглашение добавить главный экран
- Отслеживание установки приложения
- Определение того, работает ли ваше приложение как установленное.