角度和 PWA答案

【问题标题】：Angular and PWA角度和 PWA
【发布时间】：2018-06-06 06:52:54
【问题描述】：

我们是否需要为浏览器添加以下事件以显示添加到屏幕图标。

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

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

我问这个问题是为了消除疑问，因为从 chrome 版本 68+ 以下注释来自https://developers.google.com/web/fundamentals/app-install-banners/
注意：从 Chrome 68（2018 年 6 月上旬测试版）开始，Chrome 将不会自动显示添加到主屏幕横幅，您可以通过在安装提示符前调用 prompt() 来显示它带有用户手势的事件。有关完整详细信息，请参阅添加到主屏幕行为的更新。

此外，在 Mac OS 上，我无法使用开发工具删除/取消注册添加到应用程序的图标。提前致谢。

【问题讨论】：

标签： angular pwa

【解决方案1】：

在当前版本的 Chrome 中按预期工作（在 Android 上测试）

Chrome Beta (68) 仍在进行中
有一个新的/临时的迷你信息栏，目前忽略 preventDefault()

从此页面
https://developers.google.com/web/updates/2018/06/a2hs-updates
“无论您是否在 beforeinstallprompt 事件中使用 preventDefault()，当站点满足添加到主屏幕的条件时，都会出现迷你信息栏。”

【讨论】：