javascript - angular catch beforeinstallprompt 事件，添加到开发工具中的主屏幕 > 应用程序不执行任何操作

Question

我想使用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 事件？

非常感谢任何帮助!

Answer 1

对于Angular，下面的代码适合我:

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

应用程序组件.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' event is still not follows web standards

引用:Add to Home Screen | Google Developers

GitHub Gist link