PWA userChoice承诺永远无法解决

Question

我试图在beforeinstallprompt触发并显示迷你信息栏后实施对用户选择的跟踪。这是MDN上BeforeInstallPromptEvent的片段

window.addEventListener("beforeinstallprompt", function(e) { 
  // log the platforms provided as options in an install prompt 
  console.log(e.platforms); // e.g., ["web", "android", "windows"] 
  e.userChoice.then(function(outcome) { 
    console.log(outcome); // either "accepted" or "dismissed"
  }, handleError); 
});

这是我基于Google的示例的实现

window.addEventListener('beforeinstallprompt', (e) => {
  ga(`${experimentName}.send`, 'speedlink_offer', 'show', 'true');
  e.userChoice.then((choice) => {
    if (choice.outcome === 'accepted') {
      ga(`${experimentName}.send`, 'speedlink_offer', 'click', 'true');
    } else {
      ga(`${experimentName}.send`, 'speedlink_offer', 'close', 'true');
    }
  } );
});

但是承诺userChoice永远不会解决。在用户单击“取消”或“添加”按钮后，为什么无法解决？是错误还是我错过了什么？

PS。我发现，如果你捕捉用户的动作（例如点击）并执行event.prompt()，然后userChoice将得到解决。但这将独立于用户与“本地” Chrome的迷你信息栏的交互而完成。

PPS。我的Android设备上的Chrome版本是70.0.3538.110

Answer 1

我浏览了文档并遇到了同样的问题。因此，当您调用prompt已保存的提示时，您实际上会得到一个Promise<UserChoice>位置UserChoice

type UserChoice = {
  outcome: "accepted" | "dismissed";
  platform: string;
};

这不是来自文档，而是我自己的 typeScript 实现。所以是的，不要等待 userChoice 得到解决，而是检查来自 的承诺prompt。

这是我的应用程序的实现。

return prompt
  .prompt()
  .then(userChoice => {
    console.log("Prompted, result = ", userChoice);
    switch (userChoice.outcome) {
      case "accepted":
        analytics_track(key, userChoice);
        break;
      case "dismissed":
        analytics_track(key, userChoice);
        break;
    }
  })
  .catch(reason => {
    console.error("Could not prompt", reason);
  });