必须在 Angular PWA 中出现用户手势错误时调用 Prompt() 方法

Question

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

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

但有时它会抛出错误

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

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

Answer 1

扳机prompt()，不要在推迟事件后立即执行此操作。

\n

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

\n

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

\n

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

\n