Многие браузеры позволяют вам включать и продвигать установку вашего прогрессивного веб-приложения (PWA) непосредственно в пользовательском интерфейсе вашего PWA. Установка (ранее называемая «Добавить на главный экран») позволяет пользователям легко установить PWA на свое мобильное или настольное устройство. При установке PWA оно добавляется в панель запуска пользователя, что позволяет запускать его как любое другое установленное приложение.
В дополнение к возможности установки, предоставляемой браузером , можно реализовать собственный процесс установки непосредственно в приложении.
При рассмотрении вопроса о том, продвигать ли установку, лучше всего подумать о том, как пользователи обычно используют ваше PWA. Например, если есть группа пользователей, которые используют ваше PWA несколько раз в неделю, эти пользователи могут извлечь выгоду из дополнительного удобства запуска вашего приложения с главного экрана телефона или из меню «Пуск» в операционной системе настольного компьютера. Некоторые приложения для повышения производительности и развлечений также получают выгоду от дополнительного пространства экрана, создаваемого за счет удаления панелей инструментов браузера из окна в установленных standalone режимах или режимах minimal-ui .
Предварительные условия
Прежде чем приступить к работе, убедитесь, что ваше 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, независимо от того, какой механизм используется для установки вашего 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 . Safari на iOS пока не поддерживает это, поэтому вам необходимо проверить navigator.standalone , он возвращает логическое значение, указывающее, работает ли браузер в автономном режиме.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Отслеживайте, когда меняется режим отображения
Чтобы отслеживать, переключается ли пользователь между standalone и browser tab , прослушивайте изменения в медиазапросе display-mode .
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Обновить пользовательский интерфейс в зависимости от текущего режима отображения.
Чтобы применить другой цвет фона для PWA при запуске в качестве установленного PWA, используйте условный CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Обновите значок и название вашего приложения
Что делать, если вам нужно обновить название приложения или предоставить новые значки? Узнайте , как Chrome обрабатывает обновления манифеста веб-приложения, чтобы узнать, когда и как эти изменения отражаются в Chrome.