angular catch beforeinstallprompt 事件，添加到开发工具中的主屏幕 > 应用程序不做任何事情答案

【问题标题】：angular catch beforeinstallprompt event, add to homescreen in dev tools > application not doing anythingangular catch beforeinstallprompt 事件，添加到开发工具中的主屏幕 > 应用程序不做任何事情
【发布时间】：2018-12-20 15:29:32
【问题描述】：

我想使用 pwa 的添加到主屏幕功能。

我为我的应用制作了一个 pwa，出于测试目的，我使用 http-server 运行它https://www.npmjs.com/package/http-server

当我运行审计时，我得到了 92 分。唯一的失败是“不将 HTTP 流量重定向到 HTTPS”。但通过的审核包括：“可以提示用户安装 Web 应用”和“站点通过 HTTPS 提供服务”

在chrome://flags/ 我已“绕过用户参与度检查和启用应用横幅”

为了测试，我正在收听 beforeinstallprompt 事件，现在，我正在主页的 ngoninit 部分中收听该事件：

window.addEventListener('beforeinstallprompt', e => {
    console.log('beforeinstallprompt Event fired');
});

但是当我在开发工具中按“添加到主屏幕”时，控制台中没有任何记录。

如何捕捉 beforeinstallprompt 事件？

非常感谢任何帮助！

【问题讨论】：

标签： javascript angular progressive-web-apps

【解决方案1】：

对于 Angular，以下代码适用于我：

您可以使用 Google Chrome 开发者工具进行测试

app.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="addToHomeScreen()" *ngIf="showButton">Add to Home Scree</button>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  deferredPrompt: any;
  showButton = false;

  @HostListener('window:beforeinstallprompt', ['$event'])
  onbeforeinstallprompt(e) {
    console.log(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;
    this.showButton = true;
  }


  addToHomeScreen() {
    // hide our user interface that shows our A2HS button
    this.showButton = false;
    // 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;
      });
  }
}

'onbeforeinstallprompt' 事件仍然不符合网络标准

参考：Add to Home Screen | Google Developers

GitHub Gist link

【讨论】：

我想这里的诀窍是它在 app.component 上触发，我认为是基本组件。对于 Angular 应用程序来说，该事件似乎过早地在窗口上触发。
我正在关注此代码，我正在查看桌面 chrome 浏览器，没有任何事情发生。

【解决方案2】：

您可以查看有关How to Use the 'beforeinstallprompt' Event to Create a Custom PWA Add to Homescreen Experience 的博客文章。

这是示例代码：

var deferredPrompt;

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

});

  function showAddToHomeScreen() {

  var a2hsBtn = document.querySelector(".ad2hs-prompt");

  a2hsBtn.style.display = "block";

  a2hsBtn.addEventListener("click", addToHomeScreen);

}

  function addToHomeScreen() {  
  var a2hsBtn = document.querySelector(".ad2hs-prompt");  // hide our user 
  interface that shows our A2HS button

  a2hsBtn.style.display = 'none';  // Show the prompt

  deferredPrompt.prompt();  // Wait for the user to respond to the prompt

  deferredPrompt.userChoice
    .then(function(choiceResult){

  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS prompt');
  } else {
    console.log('User dismissed the A2HS prompt');
  }

  deferredPrompt = null;

});}

您应该做的第一件事是在beforeinstallprompt 事件处理程序的范围之外创建一个变量。这样您以后可以参考它。此处理程序保存对beforeinstallprompt 事件对象的引用。您可以稍后使用它来按需触发添加到homescreen 提示。

注意： 与 service worker 和 web manifest 文件不同，添加到 homescreen 提示不是网络标准。这意味着浏览器是并且总是能够决定如何以及是否提示用户向homescreen 添加渐进式网络应用。

【讨论】：