PWA - 未调用 beforeinstallprompt [英] PWA - beforeinstallprompt not called

问题描述

您好，我正在尝试安装自定义 PWA添加到主屏幕".

Hello I'm trying to install a custom PWA "Add to Homescreen".

ServiceWorkerRegistration 成功.

The ServiceWorkerRegistration is successful.

但是 beforeinstallpromp 函数在注册后没有调用.

But the function beforeinstallpromp is not calling after register.

<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 是安全的！

Also my service worker in root directory... HTTPS is secure!

我的清单:

{
  "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-checks 时有效

It's only workes when I set "Enable" chrome://flags/#bypass-app-banner-engagement-checks

看起来我发现了问题.Chrome 的 DevTools(F12) 的 Audits 选项卡提供调试信息.

Look's like I've found the problem. The Audits tabs of Chrome's DevTools(F12) gives debugging information.

推荐答案

试试这个:

 <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 只会在某些条件为真时触发:

beforeinstallprompt will only be fired when some conditions are true :

• PWA 必须尚未安装
• 满足用户参与启发式(以前，用户必须与域交互至少 30 秒，这不再是必需的).
• 您的网络应用必须包含网络应用清单.
• 您的网络应用必须通过安全的 HTTPS 连接提供服务.
• 已使用 fetch 事件处理程序注册了 Service Worker.

这篇关于PWA - 未调用 beforeinstallprompt的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！