PWA - beforeinstallprompt 未调用答案

【问题标题】：PWA - beforeinstallprompt not calledPWA - beforeinstallprompt 未调用
【发布时间】：2018-11-18 15:10:00
【问题描述】：

您好，我正在尝试安装自定义 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 选项卡提供了调试信息。

【问题讨论】：

你是怎么得到这个调试信息的？
在 chrome 上使用 F12 进行调试
在 Chrome 中，您可能还需要安装来自 Google 的 Lighthouse 扩展程序才能显示此菜单。

标签： progressive-web-apps

【解决方案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 连接提供服务。
已向 fetch 事件处理程序注册了一个服务工作者。

【讨论】：

在哪里添加此脚本代码以确保您不会错过 beforeinstallprompt 事件？
@MathiasS 我在我的 index.html 中有它，在我的 Ionic PWA 中有一个初始化应用程序方法。您只需要某个在应用加载时被调用的地方。
当我在 Safari 中打开它时，Id 不起作用（使用 google chrome 一切都很好），我的意思是 beforeinstallprompt 事件不会触发。为什么？
这是一个非常有用的答案，即使它不能解决问题，它也有助于学习好东西。谢谢
@MathiasS ：例如，在 Vue.js 应用程序中，您应该将其添加到挂载事件中。理想的地方是布局 vue 文件

【解决方案2】：

除了上述所有步骤外，还要在此处检查应用是否已卸载： chrome://apps

仅从 Mac 上的 Chrome 应用程序文件夹中删除应用程序似乎不会将其从 Chrome 中删除

如果之前安装了该应用，则不会触发beforeinstallprompt，也不会抛出任何错误:(

【讨论】：

这就是我的问题......我如何摆脱这个以进行后续调用？假设我已经安装了该应用程序，我该如何重新安装它？

【解决方案3】：

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

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

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

我最喜欢的解决方法是查看 DevTools for 404 的 > NETWORK 选项卡。

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

“失败：Service Worker 未成功提供清单的 start_url，等待获取的 start_url 超时。”这意味着“start_url”

此线程对解决生产问题有很大帮助。谢谢。

【讨论】：

【解决方案4】：

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

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

【讨论】：

是的！但解决它！在 Chrome 上，如果您已经将该站点添加到主屏幕，则 beforeinstallprompt 不会触发。确保您的网站尚未添加到主屏幕，并清除 Chrome 的网站数据，然后重试（最好在不同的 Android 手机上也一样）。
真的！您必须清除整个 Chrome 缓存，而不仅仅是特定域的网站数据！
在android中如何删除应用？我试过 chrome://apps 但什么也没显示

【解决方案5】：

致需要阅读本文的人：我在使用 Vue3 应用程序时试图找出提示时遇到的一个小旁注：

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

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

【讨论】：

【解决方案6】：

这是beforeinstallprompt 未在移动设备上触发的另一个原因（在装有 Chrome 的 Android 设备上观察到）：

在网络服务器上找不到manifest.webmanifest 中定义的符号文件（移动浏览器报告 404）。这就是在我的情况下没有触发beforeinstallprompt 的原因。

@示例

 
 // your manifest
 {
    /* ... */
    "icons": [
        {
          "src": "maskable_icon_x192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "any maskable"
        },
        /*...*/
     ]
}

确保所有图标文件（例如 maskable_icon_x192.png）都存在于您的网络服务器上。

一切顺利，汤姆

【讨论】：