Опубликовано: 14 февраля 2020 г.
Многие браузеры позволяют активировать и продвигать установку вашего прогрессивного веб-приложения (PWA) непосредственно в его пользовательском интерфейсе. Установка (ранее известная как «Добавить на главный экран») позволяет пользователям добавить ваше PWA на свои мобильные устройства или настольные компьютеры. Установка PWA добавляет его в панель запуска пользователя, поэтому оно может запускаться как любое другое установленное приложение.
Помимо процесса установки через браузер , вы можете реализовать собственный процесс установки непосредственно в своем приложении.
Принимая решение о необходимости установки, учитывайте, как пользователи обычно используют ваше PWA. Например, если есть группа пользователей, которые используют ваше PWA несколько раз в неделю, им может быть удобно запускать ваше приложение с главного экрана телефона или из меню «Пуск» в настольной операционной системе. Некоторые офисные и развлекательные приложения также выигрывают от дополнительного экранного пространства, создаваемого за счёт удаления панелей инструментов браузера из окна при установке в режимах standalone , minimal-ui или window-control-overlay .
Предпосылки
Прежде чем начать, убедитесь, что ваше PWA соответствует требованиям по установке , которые обычно включают наличие манифеста веб-приложения .
Содействовать установке
Чтобы показать, что ваше приложение Progressive Web можно установить, и предоставить настраиваемый процесс установки внутри приложения:
- Прослушайте событие
beforeinstallprompt. - Сохраните событие
beforeinstallprompt, чтобы оно могло запустить процесс установки позже. - Сообщите пользователю, что ваше PWA готово к установке, и предоставьте кнопку или другой элемент для запуска процесса установки внутри приложения.
Прослушивание события beforeinstallprompt
Если ваше прогрессивное веб-приложение соответствует требуемым критериям установки , браузер сгенерирует событие beforeinstallprompt . Сохраните ссылку на это событие и обновите пользовательский интерфейс, чтобы указать, что пользователь может установить ваше прогрессивное веб-приложение.
// 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
Медиа-запрос CSS display-mode указывает, как было запущено 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.