Как получить Добавить на главный экран Выполнить на сайте Открыть в мобильном браузере

Как получить всплывающее окно в мобильном браузере. Когда мы нажимаем на кнопку «Добавить» на дом.

Как получить это всплывающее окно в мобильном браузере «Добавить на дом» создаст значок хром на главном экране мобильного с ссылкой на сайт на мобильном телефоне.

Пожалуйста, предложите решение.

Solutions Collecting From Web of "Как получить Добавить на главный экран Выполнить на сайте Открыть в мобильном браузере"

Я нашел эту подробную статью на Среднем. Как добавить всплывающее окно «Добавить в Homescreen» в веб-приложении

Шаг 1. Создайте пустой файл service-worker.js в корневой папке. И поставьте ниже код на странице html, прежде чем закрывать тег.

<script> if ('serviceWorker' in navigator) { console.log("Will the service worker register?"); navigator.serviceWorker.register('service-worker.js') .then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened:", err) }); } </script> 

Официальными требованиями являются:

Chrome автоматически отображает баннер, когда ваше приложение соответствует следующим критериям:

  • Имеет файл манифеста веб-приложения с:
    • Short_name (используется на главном экране)
    • Имя (используется в баннере)
    • Значок 144×144 png (объявления значков должны включать тип изображения mime / png)
    • Start_url, который загружает
  • На вашем сайте зарегистрирован сервисный работник .
  • Выполняется через HTTPS (требование для использования сервисного работника).
  • Посещается по крайней мере дважды, по крайней мере, пять минут между посещениями.

Источник: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

Вы можете пропустить эти требования для тестирования или отладки, включив флаг хрома:

хром: // флаги / # двухконтурности приложение-баннер-обручальных-чеки

Проверка обхода пользователем хром-флажка