PWA beforeinstallprompt未捕获（承诺）DOMException

Question

当用户安装pwa时，以下功能可以正常工作。但是，如果拒绝，则下次访问该站点时，即使不是未定义，也会deferredPrompt.prompt();引发Uncaught (in promise) DOMException异常deferredPrompt.prompt();。

关于先前给出答案的用户，我需要检查一些东西吗？

window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    //e.preventDefault();

    let deferredPrompt;

    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Answer 1

我有类似的代码并遇到同样的问题。经过一些研究，我明白这deferredPrompt.prompt()将返回一个userResponsePromise承诺。然后我尝试添加这行代码来观察日志，看看会发生什么。

deferredPrompt.prompt()
  .then(res => console.log(res))
  .catch(error => { console.log(`----> ${error}`) })

在控制台日志中，它显示

----> NotAllowedError: The prompt() method must be called with a user gesture

我猜A2HS安装过程可能不允许prompt()直接调用。因此，我尝试通过设置一个调用操作按钮来更改我的代码，该按钮将调用prompt()方法，我认为它应该暗示“用户手势”的含义，如日志所示。

这是我的新代码，它看起来像 Google 开发人员的“添加到主屏幕”教程中的代码。（我不知道为什么我第一次没有关注它：P）

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault()
  deferredPrompt = e
})

const btnInstallApp = document.getElementById('btn-install-app')

if(btnInstallApp) {
  btnInstallApp.addEventListener('click', e => {
    deferredPrompt.prompt()
    deferredPrompt.userChoice
      .then(choiceResult => {
        if(choiceResult.outcome === 'accepted') {
          console.log('user accepted A2HS prompt')
        } else {
          console.log('user dismissed A2HS prompt')
        }
        deferredPrompt = null
      })
    })
}

我在页面某处添加“安装应用程序”按钮

<button id="btn-install-app" class="btn">Install App</button>

这次我单击“安装应用程序”按钮后可以看到“添加到主屏幕”提示。我希望这有帮助。