Question

当用户安装pwa时，以下功能可以正常工作。但是，如果拒绝，则下次try { PrintWriter out = new PrintWriter(new BufferedWriter(new FileWriter("myfile.txt", true))); out.println("the text"); out.close(); } catch (IOException e) { //exception handling left as an exercise for the reader }会抛出deferredPrompt.prompt();异常，即使Uncaught (in promise) DOMException尚未定义。

我是否需要检查有关先前获得答案的用户的信息？

deferredPrompt.prompt();

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()方法的号召性用语按钮来将代码更改为，我想它应该暗示日志中暗示的“用户手势”的含义。

这是我的新代码，看起来像Add to Home Screen tutorial from Google dev.中的代码（我不知道为什么我第一次不遵循它：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
      })
    })
}

我将我的Install App按钮添加到页面中的某处

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

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

Answer 2

小心！

我的pwa代码相似并且可以正常工作。但是，突然之间，在代码进行了微小的更改之后，我使用chrome开发人员工具在调试模式下收到了此错误。

我注意到我在deferredPromt.prompt（）之前立即设置了一个断点。造成此错误的原因是，侦听器设置了计时器以检测事件是否是由于用户手势引起的。

取消断点设置，我的代码再次起作用。

PWA beforeinstallprompt未捕获（承诺）DOMException

2 个答案: