Angular 用户第二次进入页面时不会捕获beforeinstallprompt事件

Angular 用户第二次进入页面时不会捕获beforeinstallprompt事件,angular,progressive-web-apps,ngxs,beforeinstallprompt,Angular,Progressive Web Apps,Ngxs,Beforeinstallprompt,我正在编写一个PWA,并使用。我面临的问题是,用户第一次访问该页面时,我能够存储beforeinstallprompt事件并显示自定义的安装按钮 问题是,如果用户忽略安装并重新加载页面,事件将不再被捕获。代码如下: private deferAppInstall() { const subscription = this.actions$ .pipe(ofActionDispatched(PwaStateActions.DeferAppInstall)) .s

我正在编写一个PWA,并使用。我面临的问题是,用户第一次访问该页面时,我能够存储
beforeinstallprompt
事件并显示自定义的安装按钮

问题是,如果用户忽略安装并重新加载页面,事件将不再被捕获。代码如下:

  private deferAppInstall() {
    const subscription = this.actions$
      .pipe(ofActionDispatched(PwaStateActions.DeferAppInstall))
      .subscribe(_ => {
        console.log('pipe console ');
        window.addEventListener('beforeinstallprompt', event => {
          console.log('addEventListener console');
          this.pwaStateService.setInstall(true);
          this.deferredInstallPrompt = event;
          event.preventDefault();

          subscription.unsubscribe();
          console.log('unsubscribe console');
        });
      });
  }
基本上,第一次一切正常时,后续访问只会显示
管道控制台
日志消息,而不会进入
addEventListerner
和代码的其余部分

O注意到,在使用Chrome开发工具时,如果我转到“应用程序”>“清除存储”下的“应用程序”选项卡,然后只选中“未注册的服务人员”选项并清理缓存,然后再次访问页面,则一切都将按预期工作

起初,我假设它可能与缓存相关,因为我使用的是状态管理,但我不知道缓存中是否存储了事件,如果是,我不知道如何从该缓存中获取
beforestinstallprompt
事件


清洗服务人员的选项似乎“重建”了预期的行为,我正在寻找一个解决方案,在这里我能够验证事件是否事先触发,这样我就可以触发上述代码的逻辑(或者改进它来考虑验证)。-这是否意味着他们关闭了浏览器提示?如果他们关闭了该提示,则“否”表示“否”。他们拒绝了该提示,并且不会再次显示该提示。也许几个月后,但我从未见过。(Chrome&可能是Edge)忽略我的意思是单击页面上其他地方,因此没有返回Yes或no,这是

未定义的
。是的,根据Chrome的说法,桌面电脑在3个月后才会再次显示提示,而安卓系统显然不会再出现提示。我在使用Gatsby.js时遇到了同样的问题-你找到解决方案了吗?@allicarn不太可能。它是基于浏览器的,因此您可能会找到一个适合Chrome的解决方案,但在其他浏览器上可能不适用,反之亦然。我现在忘了,但是在Chrome上,你可以选择在页面通过PWA检查后在选项上安装应用程序。你说“忽略提示”-这是否意味着他们关闭了浏览器提示?如果他们关闭了该提示,则“否”表示“否”。他们拒绝了该提示,并且不会再次显示该提示。也许几个月后,但我从未见过。(Chrome&可能是Edge)忽略我的意思是单击页面上其他地方,因此没有返回Yes或no,这是
未定义的
。是的,根据Chrome的说法,桌面电脑在3个月后才会再次显示提示,而安卓系统显然不会再出现提示。我在使用Gatsby.js时遇到了同样的问题-你找到解决方案了吗?@allicarn不太可能。它是基于浏览器的,因此您可能会找到一个适合Chrome的解决方案,但在其他浏览器上可能不适用,反之亦然。我现在忘了,但在Chrome上,你可以选择在页面通过PWA检查后在选项栏上安装应用程序。