Многие браузеры позволяют включать и продвигать установку вашего прогрессивного веб-приложения (PWA) непосредственно в его пользовательском интерфейсе. Установка (ранее называемая «Добавить на главный экран») позволяет пользователям устанавливать PWA на свое мобильное или настольное устройство. При установке PWA оно добавляется в панель запуска пользователя и может работать как любое другое установленное приложение.
В дополнение к возможности установки через браузер вы можете создать собственный процесс установки непосредственно в приложении.
При рассмотрении вопроса о том, продвигать ли установку, подумайте, как пользователи обычно используют ваше PWA. Например, если есть группа пользователей, которые используют ваше PWA несколько раз в неделю, эти пользователи могут извлечь выгоду из дополнительного удобства запуска вашего приложения с главного экрана телефона или из меню «Пуск» в операционной системе настольного компьютера. Некоторые приложения для повышения производительности и развлечений также получают выгоду от дополнительного пространства на экране, создаваемого за счет удаления панелей инструментов браузера из окна в установленных режимах standalone , minimal-ui или режима window-control-overlay .
Предварительные условия
Прежде чем приступить к работе, убедитесь, что ваше PWA соответствует требованиям к установке , которые обычно включают наличие манифеста веб-приложения .
Продвигать установку
Чтобы показать, что ваше прогрессивное веб-приложение можно установить, и предоставить собственный процесс установки внутри приложения:
- Прослушайте событие
beforeinstallprompt. - Сохраните событие
beforeinstallprompt, чтобы оно могло запустить процесс установки позже. - Сообщите пользователю, что ваше PWA можно установить, и предоставьте кнопку или другой элемент для запуска процесса установки в приложении.
Слушайте событие beforeinstallprompt
Если ваше прогрессивное веб-приложение соответствует необходимым критериям установки , браузер запускает событие beforeinstallprompt . Сохраните ссылку на событие и обновите пользовательский интерфейс, чтобы указать, что пользователь может установить ваше PWA.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Процесс установки в приложении
Чтобы обеспечить установку в приложении, предоставьте кнопку или другой элемент интерфейса, на который пользователь может нажать или коснуться, чтобы установить ваше приложение. Когда элемент щелкнут или коснется, вызовите prompt() для сохраненного события beforeinstallprompt (хранящегося в переменной deferredPrompt ). Он показывает пользователю модальное диалоговое окно установки, в котором ему предлагается подтвердить, что он хочет установить PWA.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
Свойство userChoice — это обещание, которое разрешается по выбору пользователя. Вы можете вызвать prompt() для отложенного события только один раз. Если пользователь отклоняет его, вам придется подождать, пока событие beforeinstallprompt не сработает снова, обычно сразу после разрешения свойства userChoice .
Определить, когда PWA было успешно установлено
Вы можете использовать свойство userChoice , чтобы определить, установил ли пользователь ваше приложение из вашего пользовательского интерфейса. Но если пользователь устанавливает PWA из адресной строки или другого компонента браузера, userChoice не поможет. Вместо этого вам следует прослушивать событие appinstalled , которое срабатывает всякий раз, когда устанавливается PWA, независимо от того, какой механизм используется для его установки.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Узнайте, как был запущен PWA
Медиа display-mode CSS указывает, как PWA было запущено: либо на вкладке браузера, либо как установленное PWA. Это позволяет применять разные стили в зависимости от того, как приложение было запущено. Например, вы можете настроить его так, чтобы кнопка установки всегда скрывалась и отображалась кнопка «Назад» при запуске установленного PWA.
Отслеживайте, как был запущен PWA
Чтобы отслеживать, как пользователи запускают ваше PWA, используйте matchMedia() для проверки медиа-запроса display-mode .
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
Отслеживайте, когда меняется режим отображения
Чтобы отслеживать, переключается ли пользователь между browser и другими режимами отображения, прослушивайте изменения в медиа display-mode .
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
Обновить пользовательский интерфейс в зависимости от текущего режима отображения.
Чтобы применить другой цвет фона для PWA при запуске в качестве установленного PWA, используйте условный CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Обновите значок и название вашего приложения
Что делать, если вам нужно обновить название приложения или предоставить новые значки? Узнайте , как Chrome обрабатывает обновления манифеста веб-приложения, чтобы узнать, когда и как эти изменения отражаются в Chrome.