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

自首次推出“添加到主屏幕”横幅以来,我们一直致力于更清晰地标记渐进式 Web 应用,并简化用户的安装方式。我们的最终目标是在所有平台上的多功能框中提供一个安装按钮,在 Chrome 68 中,我们正针对这一目标进行一些更改。

具体变化

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

A2HS 横幅 Chrome 67 及更低版本

A2HS 横幅屏幕截图

当网站符合“添加到主屏幕”条件,并且网站没有针对 beforeinstallprompt 事件调用 preventDefault() 时自动显示

beforeinstallprompt 事件调用 prompt() 即可显示。

迷你信息栏 Chrome 68 及更高版本

A2HS 信息栏屏幕截图
在网站符合“添加到主屏幕”条件时显示

如果用户将其关闭,则只有在经过足够长的时间(大约 3 个月)后才会显示。

无论是否对 beforeinstallprompt 事件调用 preventDefault(),都会显示。

在未来的 Chrome 版本中,引入多功能框安装按钮后,此界面处理方式将被移除。

A2HS 对话框

A2HS 对话框屏幕截图

在 Chrome 68 及更高版本中,通过用户手势对 beforeinstallprompt 事件调用 prompt() 即可显示。

当用户在 Chrome 68 及更高版本中点按迷你信息栏时显示。

在所有 Chrome 版本上,当用户从 Chrome 菜单中点击“添加到主屏幕”后,系统就会显示此图标。

迷你信息栏

迷你信息栏屏幕截图。
迷你信息栏

迷你信息栏是一个 Chrome 界面组件,不受网站控制,但可由用户轻松关闭。一旦被用户关闭,它将不会再次显示,直到一段足够长的时间(目前为 3 个月)过后才会再次显示。无论网站是否针对 beforeinstallprompt 事件执行了 preventDefault() 操作,只要网站符合添加到主屏幕条件,系统都会显示迷你信息栏。

多功能框中的“安装”按钮的早期概念。
多功能框中安装按钮的早期概念
迷你信息栏是 Android 版 Chrome 的一种临时体验,我们正致力于在所有平台上打造一致的体验,包括在多功能框中添加安装按钮。 ## 触发“添加到主屏幕”对话框
桌面版渐进式 Web 应用上的“安装”按钮。
桌面渐进式 Web 应用中的“安装”按钮

您可以指明您的应用可以通过某个界面进行安装,界面随后将显示模态安装提示,而不是在网页加载时提示用户(权限请求的反模式)。例如,此桌面 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活动详情
  • 跟踪用户对“添加主屏幕”提示的响应
  • 跟踪应用是否已安装
  • 确定您的应用是否作为安装版应用运行