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