PWA - beforeinstallprompt не вызывается

Здравствуйте! Я пытаюсь установить пользовательский PWA "Добавить на главный экран".

ServiceWorkerRegistration успешно выполнено.

Но функция beforeinstallpromp не вызывается после регистрации.

<script type="text/javascript">

  function request_debug(paramdata){

    document.getElementById('output').innerHTML += '<BR>'+ paramdata;

  }

  window.addEventListener('load', function() {

      document.getElementById('output').style.display = "block"; 

      if('serviceWorker' in navigator) {

      navigator.serviceWorker.register('sw.js').then(function(registration) {
        console.log('Service worker  registrado com sucesso:', registration);
        request_debug(registration);

      }).catch(function(error) {
        console.log('Falha ao Registrar o Service Worker:', error);
        request_debug(error);

      });

          var isTooSoon = true;
          window.addEventListener('beforeinstallprompt', function(e) {

              //e.preventDefault();
              //e.prompt();
              //promptEvent = e;
              request_debug(' window.addEventListener beforeinstallprompt fired!')

              if (isTooSoon) {
                //e.preventDefault(); // Prevents prompt display
                // Prompt later instead:
                setTimeout(function() {
                  isTooSoon = false;
                  e.prompt(); // Throws if called more than once or default not prevented
                }, 4000);
              }

          });

    }else{

      console.log('serviceWorker not in navigator');
      request_debug('serviceWorker not in navigator');

    }


  });

</script>

Также мой работник службы в корневом каталоге... HTTPS безопасен!

мой манифест:

{
  "background_color": "purple",
  "description": "lojaportaldotricot TESTE",
  "display": "standalone",
  "icons": [
    {
      "src": "/componentes/serviceWorker/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "lojaportaldotricot",
  "short_name": "lojaportaldotricot",
  "start_url": "/dashboard"
}

Это работает только тогда, когда я установил "Включить" chrome://flags/# bypass-app-banner-engagement-check

Изменение: похоже, что я нашел проблему. Вкладки Audits в Chrome DevTools (F12) предоставляют информацию об отладке. enter image description here

Ответы

Ответ 1

Попробуйте это:

 <script>
    let deferredPrompt;

    window.addEventListener('beforeinstallprompt', function(event) {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
    });

    // Installation must be done by a user gesture! Here, the button click
    btnAdd.addEventListener('click', (e) => {
      // hide our user interface that shows our A2HS button
      btnAdd.style.display = 'none';
      // Show the prompt
      deferredPrompt.prompt();
      // Wait for the user to respond to the prompt
      deferredPrompt.userChoice
        .then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
          } else {
            console.log('User dismissed the A2HS prompt');
          }
          deferredPrompt = null;
        });
    });

    </script>

beforeinstallprompt будет запущен только при выполнении некоторых условий:

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

Ответ 2

Вы включаете файл манифеста в заголовок страницы?

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

Ответ 3

Наряду со всеми этими шагами, также проверьте, что приложение удалено здесь: chrome://apps

Удаление приложения из папки Chrome Apps на вашем Mac не приводит к его удалению из Chrome

Если приложение было ранее установлено, beforeinstallprompt не будет запущено, и никаких ошибок также не будет :(

Ответ 4

Да, "start_url" неверен в манифесте.

ЕСЛИ ЛЮБАЯ ЧАСТЬ МАНИФЕСТА НЕ РАЗБИРАЕТСЯ "beforeinstallprompt".

Событие не сработало, потому что... манифест start_url неверен.

Мой любимый способ понять это - посмотреть на вкладку> СЕТЬ DevTools для 404-х годов.

И другой способ узнать, почему манифест нарушен, - запустить> AUDIT в DevTools и посмотреть, в чем заключается ошибка. Как то, что нашел @sealabr:

"Сбои: Сервисный работник не успешно обслуживает манифест start_url, истекло время ожидания для извлеченного start_url". Что означает "start_url"

Эта тема была большой помощью для устранения неполадок производства. Благодарю.