PWA userChoice承诺永远无法解决

Question

在beforeinstallprompt被触发并出现mini info bar之后，我试图实现对用户选择的跟踪。 这是BeforeInstallPromptEvent

上MDN的摘录

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 example

的实现

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的mini-info bar的交互而完成。

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);
  });