原生应用安装提示

借助原生应用安装提示，您可以让用户直接从应用商店在他们的设备上快速无缝地安装您的原生应用，而无需离开浏览器，也不会显示令人厌烦的插页式广告。

评判标准是什么？

为了向用户显示原生应用安装提示，您的网站必须满足以下条件：

  • 既不是 Web 应用，也不是设备上当前安装的原生应用。
  • 提供包含以下内容的 Web 应用清单：
  • 通过 HTTPS 投放

当您满足这些条件时，就会触发 beforeinstallprompt 事件。您可以使用它来提示用户安装您的原生应用。

必需的清单属性

如需提示用户安装您的原生应用，您需要在 Web 应用清单中添加 prefer_related_applications 和 related_applications 这两个属性。

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications 属性会告知浏览器使用您的原生应用（而不是 Web 应用）提示用户。如果您未设置此值或 false，浏览器将改为提示用户安装 Web 应用。

related_applications 是一个包含对象列表的数组，可告知浏览器您的首选原生应用。每个对象都必须包含 platform 属性和 id 属性。其中，platform 为 play，id 是您的 Play 商店应用 ID。

显示安装提示

为了显示安装对话框，您需要执行以下操作：

  1. 监听 beforeinstallprompt 事件。
  2. 通过将生成用户手势事件的按钮或其他元素告知用户您的原生应用。
  3. 通过对保存的 beforeinstallprompt 事件调用 prompt() 来显示提示。

您可以说beforeinstallprompt

如果满足条件，Chrome 会触发 beforeinstallprompt 事件。您可以使用它来指示您的应用可以安装，然后提示用户安装。

在 beforeinstallprompt 事件触发后，保存对事件的引用，并更新界面以表明用户可以安装您的应用。

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

通知用户可以安装您的应用

如需通知用户您的应用可以安装，最佳方式是在界面中添加一个按钮或其他元素。不要显示整页的插页式广告或其他可能令人厌烦或令人分心的元素。

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

显示提示

如需显示安装提示，请通过用户手势对已保存的事件调用 prompt()。系统会显示一个模态对话框，要求用户将您的应用添加到他们的主屏幕。

然后，监听 userChoice 属性返回的 promise。promise 会在提示显示且用户响应后返回一个具有 outcome 属性的对象。

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

您只能对延迟事件调用 prompt() 一次。如果用户将其关闭，您需要等到 beforeinstallprompt 事件在下一个页面导航时触发。

使用内容安全政策时的特殊注意事项

如果您的网站具有限制性的内容安全政策，请务必将 *.googleusercontent.com 添加到 img-src 指令中，以便 Chrome 可以从 Play 商店下载与您的应用相关联的图标。

在某些情况下，*.googleusercontent.com 可能比预期更详细。您可以通过远程调试 Android 设备来确定应用图标的网址，从而缩小范围。