Можно ли сделать кнопку в приложении, которая запускает баннер установки PWA «Добавить на главный экран»?

Question

Я понимаю, что в правильно сделанных приложениях Progressive Web App мобильные браузеры будут отображать баннер, предлагающий пользователям «установить» приложение на их домашнем экране.

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

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

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

Answer 1

В мобильном Chrome на Android доступ к «Добавить на главный экран» можно получить из меню браузера.(Аналогичные параметры могут существовать и для мобильного Safari / Firefox на Android / iOS.) Файл манифеста веб-приложения считывается, и приложение добавляется так, как если бы оно использовалось в исходной функции приглашения.

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

Answer 2

Существуют события, которые в настоящее время запускаются браузерами, которые помогают решить проблему установки PWA. Это не веб-стандарт YET, но это хороший подход.

• 'beforeinstallprompt' запускается непосредственно перед отображением приглашения и
• 'appinstalled' запускается сразу после завершения установки.

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

Ниже приведена ссылка о том, как этого добиться:

https://web.dev/installable/discover-installable/codelab-make-installable

Answer 3

Chrome (или любой браузер, поддерживающий PWA) вызывает событие beforeinstallprompt для баннера установки веб-приложения , которое можно перехватить и повторно запустить в более подходящее время, если вы считаете, что пользователь этого не сделаетпропустить / убежден в добавлении вашего сайта на домашнюю страницу.Начиная с версии Chrome 68, перехват до установки пакета и обработка запроса на установку программного обеспечения являются обязательными, и баннеры не будут отображаться автоматически.

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

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

Альтернативный вариант: Если пользователь пропустил приглашение на установку или даже решил не устанавливать его на домашний экран, дайте некоторое время, и, по вашему мнению, ему начинает нравиться ваш сайт (на основена конверсии) вы можете показать ему полную страницу или половину страницы Div всплывающего вида инструкции по установке, чтобы добавить свой сайт на домашний экран из меню браузеров.Он может иметь несколько изображений или анимацию Gif, показывающую пользователю, как добавить на главный экран из меню.При этом это должно быть самоочевидным для большинства пользователей, если не для всех.

Здесь - некоторый пример кода для того же самого, который специфичен для iOS (смотрите в #PROTIP 3).

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

Для разработки / тестирования: Если вам нужно, чтобы этот баннер появлялся несколько раз для целей разработки / тестирования, вы можете установить в Chrome следующий поток:

chrome://flags/#bypass-app-banner-engagement-checks