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

Ответ 1

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

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

• Имеет файл манифеста веб-приложения с:
  • короткое имя (используется на главном экране)
  • имя (используется в баннере)
  • значок PNX размером 144 x 144 (в объявлениях значков должен быть изображен тип mime изображения /png)
  • start_url, который загружает
• Сервисный работник зарегистрирован на вашем сайте.
• Обслуживается через HTTPS (требование для использования сервисного работника).
• Посещается не менее двух раз, по крайней мере, пять минут между посещениями.

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

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

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

Ответ 2

Для отображения файла манифеста необходимо иметь следующее.

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

   1. short_name - используется на домашнем экране чуть ниже значка.
   2. name - полное название вашего приложения
   3. icon - логотип/значок размером не менее 192x192 символов 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(), который позволяет отображать всплывающее окно по желанию.

Ответ 3

Я нашел эту подробную статью на 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>

Ответ 4

В вашем js файле службы есть эта строка.

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