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

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

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

• Has a web app manifest file with:
  • a short_name (used on the home screen)
  • имя (используется в баннере)
  • значок png 144x144 (объявления значка должны включать MIME-тип изображения/png)
  • start_url, который загружает
• На вашем сайте зарегистрирован сервисный работник.
• Обслуживается через HTTPS (требование для использования сервисный работник).
• Посещается не менее двух раз с интервалом между посещениями не менее пяти минут.

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

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

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

В вашем js-файле сервисного работника есть эта единственная строка.

self.addEventListener('fetch', function(event) {});

Вам нужно иметь следующее, чтобы показать файл манифеста.

1. У вас должен быть файл манифеста веб-приложения с:

   1. short_name - its used on the home screen just below the icon.
   2. name — полное название вашего приложения.
   3. значок — логотип/значок размером не менее 192 x 192 png (объявления значков должны включать MIME-тип изображения/png)
   4. start_url — страница, которая должна загружаться при открытии приложения.

2. На вашем сайте должен быть зарегистрирован сервис-воркер.

3. Убедитесь, что ваш сайт обслуживается через HTTPS (требование для использования сервисного работника).

4. И это должно соответствовать эвристике взаимодействия браузера с сайтом.

Теперь вы можете захватить это всплывающее окно и решить, когда вы хотите его показать.

window.addEventListener("beforeinstallprompt", ev => { 
  // Stop Chrome from asking _now_
  ev.preventDefault();

  // Create your custom "add to home screen" button here if needed.
  // Keep in mind that this event may be called multiple times, 
  // so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.prompt();
});

Посмотрите на beforeinstallprompt событие, которое вы можете перехватить и приостановить. .

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

Я нашел эту подробную статью на Medium. Как добавить “ Всплывающее окно «Добавить на главный экран» в веб-приложении

Шаг 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>

Шаг 2: Создайте файл манифеста. Создайте файл manifest.json в корневой папке. Добавьте тег ниже в раздел заголовка html-страницы.

<link rel="manifest" href="/manifest.json">

Шаг 3: Добавьте конфигурации в файл манифеста Вот пример конфигурации.

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

В приведенном выше коде вы можете заменить свои собственные значения.

short_name: это имя отображается на главном экране рядом со значком приложения.

значки: установите значки разного размера для разных размеров экрана.

theme_color: этот цветовой код изменит цвет адресата в Chrome.

background_color: установите цвет фона для экрана-заставки.

name : полное название приложения.

Вы можете проверить свой манифест здесь по адресу https://manifest-validator.appspot.com.

Я несколько часов пытался добавить опцию A2HS, и, по милости Божьей, я сделал это так:

На основании этих критериев вам необходимо убедиться, что:

• Веб-приложение еще не установлено
• Соответствует эвристике взаимодействия с пользователем
• Обслуживаться по HTTPS
• Includes a Web App Manifest that includes:
  • short_name or name
  • значки — должны включать значки размером 192 и 512 пикселей.
  • start_url
  • дисплей — должен быть полноэкранным, автономным или минимальным пользовательским интерфейсом.
  • Регистрирует работника службы с функциональным обработчиком выборки.

Манифест веб-приложения:

Создайте файл manifest.webmanifest и добавьте что-то похожее на:

{
    "short_name":"AskGod",
    "name":"AskGod",
    "start_url":"/askgod/",
    "display":"standalone",
    "theme_color":"#007bff",
    "background_color":"#ffffff",
    "icons": [
      {
       "src": "/icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
      },
      {
       "src": "/icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
      },
      {
       "src": "/icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
      },
      {
       "src": "/icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
      },
      {
       "src": "/icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
      },
      {
       "src": "/icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"
      },
      {
        "src": "/icons/android-icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "density": "4.0"
       }
     ]
 }

Для генерации иконок я использовал favicon-generator , он не дает изображение 512x512, поэтому я использовал другой сайт для получения изображения 512x512

start_url зависит от вашего базового URL-адреса, например, если URL-адрес вашего веб-сайта fawazahmed0.github.io/, тогда ваш start_url будет:

"start_url":"/

если ваш URL-адрес fawazahmed0.github.io/askgod, то ваш start_url будет:

"start_url":"/askgod/

В вашем HTML-коде свяжите свой файл веб-манифеста:

<link rel="manifest" href="/manifest.webmanifest" />

Сотрудник службы:

создайте файл с именем service-worker.js и добавьте следующий код:

self.addEventListener('fetch', function(event) {});

В вашем коде javascript добавьте следующий код:

// Register Service worker for Add to Home Screen option to work
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') }

Теперь вы должны увидеть параметр «Добавить на главный экран», если вы его не видите, затем откройте Chrome Devtools и запустите отчет Lighthouse для своего сайта, и вы должны убедиться, что веб-сайт соответствует всем критериям установки в разделе PWA.

Рабочая демонстрация с опцией A2HS: AskGod