有没有办法找到添加到主屏幕 - 应用程序图标是否已使用 Javascript 添加到主屏幕？答案

【问题标题】：Is there anyway to find whether the add to home screen - app icon has been added to home screen using Javascript?有没有办法找到添加到主屏幕 - 应用程序图标是否已使用 Javascript 添加到主屏幕？
【发布时间】：2018-05-08 10:08:18
【问题描述】：

配置我们的应用程序支持添加到主屏幕选项，请求权限我们添加了一个按钮，点击提示将要求在主屏幕中添加图标。如果用户一直点击关闭，那么它就不会再询问，所以按钮变得不起作用。

如果用户已经添加了图标，我没有任何方法可以找到它。

【问题讨论】：

为什么需要知道？它对您的应用有何影响？
@evolutionxbox，如果用户将应用添加到主屏幕，则很可能是喜欢您的应用的普通用户。如果您试图向用户出售一些附加功能，这是一个有价值的信息。
@JoseCherian - 无论如何，您可以通过 beforeinstallprompt 事件的 result.outcome 捕获用户的操作来向用户出售一些附加功能的后续跟进（请参阅下面的答案）。如果他接受了，他已经喜欢你的应用了（根据你的推理）:)。无论如何，经过更多研究，我可以看到确实有一个选项可以确定应用程序是否已成功安装（请参阅我的答案中的更新），因此应用程序图标是否已添加到主屏幕。
@SaurabhRajpal，感谢您的回答，这是一次这样做的方法。但是，如果我需要编写代码来保存它并稍后再检查它，我还可以将来自用户的每个获取请求的详细信息记录到 indexeddb 并预测更好的时间来提示应用内购买。
当然。捕获事件后，您始终可以保存它，然后将其用于您希望提供给用户的任意数量的用例。基本上问题是捕获安装事件，现在已经回答了。感谢您为围绕此要求的可能用例提供上下文！

标签： javascript google-chrome web progressive-web-apps

【解决方案1】：

我最熟悉的方法是捕获应用程序图标是否已添加到主屏幕。简单的原因可能是没有任何有效的现有用例。但是，您可以捕获的是用户采取的操作。当显示 A2HS 横幅时，您可以点击 beforeinstallprompt 事件来确定用户在看到横幅时所做的选择。

下面的代码显示了这一点：

window.addEventListener('beforeinstallprompt', function(event) {
  event.userChoice.then(function(result) {                      

  if(result.outcome == 'dismissed') {                         
    // User dismissed
  }
  else {
    // User accepted
  }
});
});

更新：

在浏览official doc for A2HS的过程中，找到了一种方法来判断应用是否在用户接受提示后成功添加到主屏幕，您可以监听appinstalled事件。代码：

window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

【讨论】：

非常感谢您的信息，通过此我们可以跟踪应用程序是否已安装，但安装后，如果用户打开网站第n次次，那么如何查看应用程序是否已安装或尚未安装？
您可以将其保存在您的应用存储中（例如 indexedDB），然后在您想知道该应用是否已安装时随时引用它。这可以像 db-"installed":'true' 中的另一个键值对。
@SaurabhRajpal 如果用户从他的设备上卸载了该应用程序并且您想再次手动向他显示提示怎么办？我猜installed 的值不会被清除。
AFAIK，目前还没有可用的“卸载”事件，您可以使用它通过代码从存储中清除该标志。要再次显示提示，您不能手动进行。浏览器应该首先为您提供 A2HS 事件。基于此，您可以再次遵循相同的流程。
这是什么app.logEvent 方法？这个app 对象是什么？

【解决方案2】：

应用安装不工作

window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

【讨论】：