Angular PWA添加到主屏幕按钮，镀铬，带角度4

我已经开始使用Workbox3处理PWA。到目前为止，它的效果相当惊人。我已经在“添加到主屏幕”按钮中添加了代码，用户可以将其添加到手机的主屏幕中。但在主屏幕上添加图标的提示框只显示一次。一旦我把这个图标添加到主屏幕上，然后，如果我删除它，然后再试一次，它就什么也不显示了

我正在从chrome的DevTool->Application->Mainfest sectoin->Add to Home Screen签入桌面chrome。我的维修工安装正确，工作正常

它没有显示任何错误。因此，我无法追踪问题所在

这是我迄今为止为添加到主屏幕所做的代码。我在页脚添加了这个按钮

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The user has had a postive interaction with our app and Chrome
        // has tried to prompt previously, so let's show the prompt.
        deferredPrompt.prompt();

        // Follow what the user has done with the prompt.
        deferredPrompt.userChoice.then(function(choiceResult) {

          console.log(choiceResult.outcome);

          if(choiceResult.outcome == 'dismissed') {
            console.log('User cancelled home screen install');
          }
          else {
            console.log('User added to home screen');
          }

          // We no longer need the prompt.  Clear it up.
          deferredPrompt = null;
        });
      }
    });

    window.addEventListener('appinstalled', (evt) => {
      app.logEvent('a2hs', 'installed');
      console.log("dfadf    ");
    });

添加到主屏幕
var延迟提示；
var btnSave=document.querySelectorAll（'.addToHome'）[0]；
window.addEventListener（'beforeinstallprompt'，函数（e）{
log（'beforeinstallprompt事件已激发'）；
//e、 preventDefault（）；//我甚至尝试使用这个未注释的，到目前为止没有运气
//隐藏事件，以便稍后触发。
延迟提示=e；
返回false；
});
btnSave.addEventListener（'click'，function（）{
如果（延迟提示！==未定义）{
//用户与我们的应用程序和Chrome进行了积极的互动
//以前尝试过提示，现在显示提示。
deferredPrompt.prompt（）；
//按照用户所做的提示进行操作。
deferredPrompt.userChoice.then（函数（choiceResult）{
控制台日志（choiceResult.Output）；
如果（choiceResult.Output==‘已驳回’）{
log（“用户已取消主屏幕安装”）；
}
否则{
log（“用户添加到主屏幕”）；
}
//我们不再需要提示了，把它弄清楚。
deferredPrompt=null；
});
}
});
window.addEventListener（'appinstalled'，（evt）=>{
应用程序logEvent（'a2hs'，'installed'）；
控制台日志（“dfadf”）；
});

---

它只显示一次在此控制台触发的安装前提示事件。如果我再次尝试，则不显示任何内容。

如果您需要在可以更改Chrome标志的选定设备中再次显示安装提示，则可以通过启用此标志来执行此操作

chrome://flags/#bypass-app-banner-engagement-checks

如果站点满足所有PWA标准，并且用户访问该站点的次数足够多且满足参与阈值（任何浏览器供应商或W3C都不难定义），浏览器仅显示一次安装提示

---

在您的情况下，它显示了您已使用的提示，但删除了已安装的应用程序，这意味着您必须等待达到浏览器设置的参与阈值（您将使用上述标志覆盖该阈值）。关于浏览器检查已安装应用是否存在并重新提示的频率，也没有官方文档或标准。虽然这些提示的工作方式仍在不断改进（一些浏览器/OS组合到目前为止还没有显示），但此标志节省了开发人员的测试工作

你可以参考这个。它指出，你的网站应该在https与证书，有效的清单以及一个有效的服务工人显示在chromes应用程序选项卡，所有这一切使你的网站作为基本PWA资格添加为可安装的网站。您也可以检查此项以获取其他参考。我需要在哪里运行此项<代码>chrome://flags/#bypass-应用标题参与检查