“添加到主屏幕”行为变更

自我们首次发布“添加到主屏幕”横幅以来，我们一直在努力更明确地标记渐进式 Web 应用，并简化用户的安装方式。我们的最终目标是在所有平台上的多功能框中提供安装按钮，在 Chrome 68 中，我们将针对这一目标进行更改。

具体变化

从 Android 上的 Chrome 68（2018 年 7 月推出稳定版）开始，Chrome 将不再显示“添加到主屏幕”横幅。如果网站符合添加到主屏幕条件，Chrome 将显示迷你信息栏。然后，如果用户点击迷你信息栏，或者您在用户手势中对 beforeinstallprompt 事件调用 prompt()，Chrome 就会显示模态“添加到主屏幕”对话框。

迷你信息栏

迷你信息栏是 Chrome 界面组件，无法由网站控制，但可由用户轻松关闭。一旦被用户关闭，直到足够长的时间（目前为 3 个月）后，它才会再次显示。当网站满足添加到主屏幕条件时，无论您是否对 beforeinstallprompt 事件执行 preventDefault()，迷你信息栏都会显示。

迷你信息栏是 Android 版 Chrome 的一种临时体验，我们致力于在所有平台上打造一致的体验，包括将安装按钮添加到多功能框中。 ## 触发“add to home screen”对话框

您可以指明您的应用可以通过某个界面安装，然后显示模态安装提示，而不是在网页加载时提示用户（针对权限请求的反模式）。例如，此桌面 PWA 会在用户个人资料名称的正上方添加一个“安装应用”按钮。

通过手势来提示用户安装应用可减少给用户带来的垃圾内容，并增加他们点击“添加”而不是“取消”的可能性。将“安装”按钮集成到您的应用中意味着，即使用户选择今天不安装您的应用，该按钮也仍会在明天或何时准备好安装时显示。

监听 beforeinstallprompt 事件

如果您的网站符合添加到主屏幕的条件，Chrome 将触发 beforeinstallprompt 事件，保存对事件的引用，并更新界面以指明用户可以将您的应用添加到主屏幕。

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

如果应用已安装，则不会触发 beforeinstallprompt 事件（请参阅添加到主屏幕条件）。但是，如果用户稍后卸载了该应用，每次页面导航时都会再次触发 beforeinstallprompt 事件。

显示包含 prompt() 的对话框

如需显示“添加到主屏幕”对话框，请在用户手势中对已保存的事件调用 prompt()。Chrome 将显示模态对话框，提示用户将应用添加到其主屏幕。然后，监听 beforeinstallprompt 事件的 userChoice 属性返回的 promise。在系统显示提示并且用户响应后，promise 会返回一个具有 outcome 属性的对象。

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

您只能对延迟事件调用 prompt() 一次，如果用户点击对话框中的取消，则需要等到下一页导航中触发 beforeinstallprompt 事件。与传统权限请求不同，点击“取消”不会阻止将来对 prompt() 的调用，因为它必须在用户手势内调用。

其他资源

请查看应用安装横幅了解详情，包括：

• beforeinstallprompt 事件的详细信息
• 跟踪用户对添加主屏幕提示的响应
• 跟踪应用是否已安装
• 确定您的应用是否作为已安装的应用运行