PWA userChoice promise从不解决

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

这是我基于谷歌的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');
    }
  } );
});

但是promise userChoice永远不会解决。为什么用户单击Cancel或Add按钮后不能解决？是bug，还是我漏掉了什么？

​

PS。我发现如果你捕获用户行为(例如点击)并执行event.prompt()，那么userChoice就会被解决。但它将独立于用户与“原生”Chrome的mini-info bar的交互而完成。

PPS。我的安卓设备上的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);
  });