Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Добавить на домашний экран

  1. Каковы критерии?
  2. Показать диалог добавления на главный экран
  3. Слушайте перед установкой
  4. Сообщите пользователю, что ваше приложение может быть установлено
  5. Показать подсказку
  6. Мини-инфо-бар
  7. Определите, было ли приложение успешно установлено
  8. Определение, запущено ли ваше приложение с домашнего экрана
  9. Сафари
  10. Обновление иконки и названия вашего приложения
  11. рабочий стол
  12. Протестируйте свое дополнение к опыту главного экрана
  13. Chrome для Android
  14. Chrome OS, Linux или Windows

Если в вашем PWA есть случаи, когда пользователю полезно установить ваше приложение, например, если у вас есть пользователи, которые используют ваше приложение чаще, чем раз в неделю, вы должны содействовать установке вашего PWA в веб-интерфейсе вашего приложения.

Добавить на главный экран, иногда называемый приглашением к установке веб-приложения, облегчает пользователям установку вашего Progressive Web App на свой мобильный или настольное устройство , После того, как пользователь примет приглашение, ваш PWA будет добавлен в его панель запуска и будет работать как любое другое установленное приложение.

Chrome справляется с большинством тяжелых работ для вас:

  • На мобильном телефоне Chrome сгенерирует WebAPK , создавая еще более интегрированный опыт для ваших пользователей.
  • На рабочем столе ваше приложение будет установлено и запущено в окно приложения ,

Каковы критерии?

Чтобы пользователь мог установить ваше Progressive Web App, оно должно соответствовать следующим критериям:

  • Веб-приложение еще не установлено.
  • Соответствует эвристике взаимодействия с пользователем (в настоящее время пользователь взаимодействует с доменом не менее 30 секунд)
  • Включает в себя манифест веб-приложения это включает:
  • Подается более HTTPS (требуется для сервисных работников)
  • Зарегистрировал работник службы с обработчиком событий выборки

Когда эти критерии будут выполнены, будет запущено событие beforeinstallprompt, которое вы можете использовать, чтобы предложить пользователю установить ваше Progressive Web App, и может отображаться мини-информационная панель , Увидеть Слушайте перед установкой ,

Другие браузеры имеют другие критерии для установки или для запуска события beforeinstallprompt. Проверьте их соответствующие сайты для получения полной информации: край , Fire Fox , опера , Интернет Samsung , а также UC Browser ,

Показать диалог добавления на главный экран

Если в вашем PWA есть случаи, когда пользователю полезно установить ваше приложение, например, если у вас есть пользователи, которые используют ваше приложение чаще, чем раз в неделю, вы должны содействовать установке вашего PWA в веб-интерфейсе вашего приложения

Диалог добавления на главный экран на Android

Чтобы открыть диалоговое окно «Добавить на главный экран», вам необходимо:

  1. Прослушайте событие beforeinstallprompt
  2. Уведомить пользователя, что ваше приложение может быть установлено с помощью кнопки или другого элемента, который сгенерирует событие жеста пользователя.
  3. Показать приглашение, вызвав prompt () для сохраненного события beforeinstallprompt.

Слушайте перед установкой

Если добавить на главный экран критерии Если Chrome выполнено, Chrome запустит событие beforeinstallprompt, которое вы можете использовать, чтобы указать, что ваше приложение можно «установить», а затем предложит пользователю установить его.

Когда событие beforeinstallprompt сработало, сохраните ссылку на событие и обновите свой пользовательский интерфейс, чтобы указать, что пользователь может добавить ваше приложение на свой домашний экран.

let deferredPrompt; window.addEventListener ('beforeinstallprompt', (e) => {// Предотвращаем автоматическое отображение приглашения Chrome 67 и более ранних версий e.preventDefault (); // Сохраняем событие, чтобы его можно было вызвать позже. deferredPrompt = e;}) ;

Сообщите пользователю, что ваше приложение может быть установлено

Есть много разных узоры которую вы можете использовать, чтобы уведомить пользователя, что ваше приложение может быть установлено, и продвинуть установку, например, кнопку в заголовке, элемент в меню навигации или элемент в вашем фиде контента.

window.addEventListener ('beforeinstallprompt', (e) => {// Предотвращение автоматического отображения приглашения Chrome 67 и более ранних версий e.preventDefault (); // Сохранение события, чтобы его можно было вызвать позже. deferredPrompt = e; // Обновление пользовательского интерфейса уведомляет пользователя, которого он может добавить на домашний экран btnAdd.style.display = 'block'; });

Вы можете подождать, прежде чем показывать подсказку пользователю, чтобы не отвлекать их от того, что они делают. Например, если пользователь участвует в процессе извлечения или создает свою учетную запись, дайте ему завершить это, прежде чем прерывать его запросом.

Показать подсказку

Чтобы отобразить подсказку добавления на главный экран, вызовите подсказку () для сохраненного события в жесте пользователя. Появится модальное диалоговое окно с просьбой добавить приложение на домашний экран.

Затем прослушайте обещание, возвращаемое свойством userChoice. Обещание возвращает объект с выходным свойством после того, как приглашение было показано, и пользователь ответил на него.

btnAdd.addEventListener ('click', (e) => {// скрыть наш пользовательский интерфейс, который показывает нашу кнопку A2HS btnAdd.style.display = 'none'; // Показать подсказку deferredPrompt.prompt (); // ждать пользователь отвечает на приглашение deferredPrompt.userChoice .then ((choiceResult) => {if (choiceResult.outcome === 'принято') {console.log ('пользователь принял приглашение A2HS');} else {console. log («Пользователь отклонил приглашение A2HS»);} deferredPrompt = null;});});

Вы можете только вызвать prompt () для отложенного события один раз. Если пользователь отклоняет его, вам нужно подождать, пока на следующей странице навигации не сработает событие beforeinstallprompt.

Мини-инфо-бар

Мини-инфобар

Мини-информационная панель - это промежуточный опыт для Chrome на Android, поскольку мы работаем над созданием согласованного интерфейса для всех платформ, который включает кнопку установки в омнибоксе.

Мини-информационная панель является компонентом пользовательского интерфейса Chrome и не контролируется сайтом, но может быть легко отклонена пользователем. После удаления пользователем он не появится снова, пока не пройдет достаточное количество времени (в настоящее время 3 месяца). Мини-инфобар появится, когда сайт встретит критерии , независимо от того, вы предотвращаетеDefault () в событии beforeinstallprompt или нет.

Была ли эта страница полезной?

да

Что было лучшим на этой странице?

Это помогло мне достичь цели

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Там была информация, которая мне была нужна

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Он имел точную информацию

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Это было легко читать

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Что-то другое

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

нет

Что было худшим на этой странице?

Это не помогло мне выполнить мои цели

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Мне не хватало необходимой мне информации

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

У него была неточная информация

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Было трудно читать

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Что-то другое

Спасибо за ваш отзыв! Если у вас есть конкретные идеи по улучшению этой страницы, пожалуйста, создать проблему ,

Определите, было ли приложение успешно установлено

Чтобы определить, было ли приложение успешно добавлено на домашний экран пользователя после того, как он принял приглашение, вы можете прослушать событие appinstalled.

window.addEventListener ('appinstalled', (evt) => {app.logEvent ('a2hs','установлено ');});

Определение, запущено ли ваше приложение с домашнего экрана

медиа-запрос в режиме отображения

Медиа-запрос в режиме отображения позволяет применять стили в зависимости от того, как было запущено приложение, или определять, как оно было запущено с помощью JavaScript.

Чтобы применить другой цвет фона для приложения выше при запуске с главного экрана с помощью «display»: «standalone», используйте условный CSS:

@media all and (display-mode: standalone) {body {background-color: yellow; }}

Также возможно определить, является ли режим отображения автономным от JavaScript:

if (window.matchMedia ('(display-mode: standalone)'). совпадает) {console.log ('display-mode is standalone'); }

Сафари

Чтобы определить, было ли приложение запущено в автономном режиме в Safari, вы можете использовать JavaScript для проверки:

if (window.navigator.standalone === true) {console.log ('режим отображения автономен'); }

Обновление иконки и названия вашего приложения

Android

На Android, когда WebAPK запущен, Chrome проверит текущий установленный манифест по живому манифесту. Если требуется обновление, оно будет поставлены в очередь и обновлены когда устройство подключено и подключено к WiFi.

рабочий стол

На рабочем столе манифест не обновляется автоматически, но это запланировано на будущее обновление.

Протестируйте свое дополнение к опыту главного экрана

Вы можете вручную вызвать событие beforeinstallprompt с помощью Chrome DevTools. Это позволяет увидеть пользовательский опыт, понять, как работает поток, или отладить поток. Если Критерии PWA не выполнены, Chrome сгенерирует исключение в консоли, и событие не будет запущено.

Chrome для Android

  1. Открыть удаленная отладка сеанс на телефон или планшет.
  2. Перейти на панель приложений .
  3. Перейдите на вкладку « Манифест ».
  4. Нажмите Добавить на главный экран

Chrome OS, Linux или Windows

  1. Открыть Chrome DevTools
  2. Перейти на панель приложений .
  3. Перейдите на вкладку « Манифест ».
  4. Нажмите Добавить на главный экран

Будет ли уволен до установки?

Самый простой способ проверить, будет ли запущено событие beforeinstallprompt, это использовать Маяк провести аудит вашего приложения и проверить результаты Пользователю может быть предложено установить веб-приложение тестовое задание.

Каковы критерии?
Была ли эта страница полезной?