Question

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

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

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

在chrome：// flags /中，我“绕过了用户参与度检查并启用了应用横幅”

为了进行测试，我正在监听beforeinstallprompt事件，现在，我正在使用以下方法在主页的ngoninit部分监听该事件：

Poem = Convert.ToInt32(count[0]);
Line = Convert.ToInt32(count[1]);
Word = Convert.ToInt32(count[2]);

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

如何捕获beforeinstallprompt-event？

非常感谢您的帮助！

Answer 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

Answer 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的提示。

注意：与服务工作者和网络清单文件不同，添加到 homescreen提示不是网络标准。这意味着浏览器是和总是能够决定如何以及是否提示用户将渐进式Web应用程序添加到homescreen。

角度捕获beforeinstallprompt事件，在开发工具中添加到主屏幕>应用程序未执行任何操作

2 个答案:

app.component.ts