Question

您好我正在尝试安装自定义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-checks

编辑：看起来就像我发现了问题。 Chrome的DevTools（F12）的Audits选项卡提供调试信息。

Answer 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>

安装提示前只有在满足某些条件时才会被触发：

必须尚未安装PWA
满足用户参与性启发（用户必须与您的Web应用程序至少互动30秒。
您的网络应用程序必须包含网络应用程序清单。
您的Web应用必须通过安全的HTTPS连接进行服务。
已使用获取事件处理程序注册了服务工作者。

Answer 2

您是否在页眉中包含清单文件？

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

Answer 3

完成上述所有步骤后，还请检查此处是否已卸载该应用程序： chrome://apps

从Mac上的Chrome Apps文件夹中删除该应用程序似乎并不能将其从Chrome中删除

如果先前已安装该应用程序，则不会触发beforeinstallprompt，也不会抛出任何错误：（

Answer 4

致任何需要阅读本文的人：我在尝试找出提示时在我的 Vue3 应用程序上工作时遇到的一个小注意事项：

beforeInstallPrompt 将在页面加载后不久触发。

因此，请确保在页面加载附近设置事件侦听器。我花了几个小时才找到这个。我试图在用户入职的某个地方添加事件侦听器。页面加载后的方式。并且无法弄清楚为什么提示没有显示。

Answer 5

是的，清单中的“ start_url”不正确。

如果清单的任何部分被破坏，则不会触发“ beforeinstallprompt”。

该事件未触发，因为...清单的start_url不正确。

我最喜欢的解决方法是查看404的DevTools的>“网络”标签。

查看清单为什么损坏的另一种方法是在DevTools中运行> AUDIT，然后查看错误是什么。就像@sealabr发现的一样：

“失败：服务人员未成功提供清单的start_url，超时，等待获取的start_url。”意思是“ start_url”

该线程对生产进行故障排除有很大帮助。谢谢。

PWA - 未调用beforeinstallprompt

5 个答案: