原生应用安装提示

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

条件是什么？

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

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

必需的清单属性

如需提示用户安装您的原生应用，您需要向网络应用清单添加两个属性：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 设备来缩小范围，以确定应用图标的网址。