在 angular PWA 中必须使用用户手势错误调用 prompt() 方法答案

【问题标题】：The prompt() method must be called with a user gesture error in angular PWA在 angular PWA 中必须使用用户手势错误调用 prompt() 方法
【发布时间】：2019-11-06 11:32:04
【问题描述】：

我在我的 Angular 项目中开发了 PWA，PWA 安装横幅通过调用 prompt() 事件显示在 chrome 浏览器上，如下所示，

this.promptEvent = event;
this.promptEvent.prompt();

但有时它会抛出错误

prompt() 方法必须通过用户手势调用。

我找不到解决方案，任何帮助将不胜感激。

【问题讨论】：

标签： progressive-web-apps angular-pwa

【解决方案1】：

触发prompt() 使用用户操作（例如单击按钮），不要在推迟事件后立即执行此操作。


    var promptEvent; 

    // Capture event and defer
    window.addEventListener('beforeinstallprompt', function (e) {
        e.preventDefault();
        promptEvent = e;
        listenToUserAction();
    });

    // listen to install button clic
    function listenToUserAction() {
        const installBtn = document.querySelector(".install-btn");
        installBtn.addEventListener("click", presentAddToHome);
    }
    
    // present install prompt to user
    function presentAddToHome() {
        promptEvent.prompt();  // Wait for the user to respond to the prompt
        promptEvent.userChoice
          .then(choice => {
              if (choice.outcome === 'accepted') {
                  console.log('User accepted');
              } else {
                  console.log('User dismissed');
              }
          })
    }

完整教程链接https://love2dev.com/blog/beforeinstallprompt

请注意，这仅适用于某些浏览器https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent#Browser_compatibility

【讨论】：