迁移至 macOS 上的原生通知系统

Paul Lewis

Stephen McGruer

从 Chrome 59 开始，通过 Notifications API 或 系统将显示 chrome.notifications Extensions API 由 macOS 原生通知系统（而非 Chrome 自己的系统）直接发出。

这一变化使得 macOS 上的 Chrome 在与平台集成方面表现得更加出色 并修复了许多长期存在的错误 系统“勿扰”设置

下面我们将介绍此更改与现有 API。

通知中心

本次变更的好处之一就是 打开 macOS 的通知中心。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Google Chrome 通知将显示在 macOS 通知中心内

不同之处

图标大小和位置

图标的外观将发生变化。它们的尺寸更小，内边距为 。您可以考虑改为使用透明的背景图标 而不是纯色。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Mac 版 Chrome 通知图标的显示前后对比 macOS

操作图标

在此次更改之前，操作按钮和图标会显示在 通知。对于原生通知，操作按钮图标 用户将需要将鼠标悬停在通知上并选择“更多” 按钮，查看可执行的操作。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 带有图标的通知操作按钮之前和之后 Chrome 与通过 macOS 显示的对比

Chrome 徽标

Chrome 徽标将始终显示，且不能更换或更改。这个 是 macOS 上的第三方应用的一项要求。

图片

macOS 将不再支持 image 选项。如果您定义了一个映像 属性，因此通知仍会显示，但会忽略图片 参数（请参阅下面的示例）。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> macOS 上 Chrome 的前后对比通知图片

您可以使用以下代码实现功能检测图片支持：

if ('image' in Notification.prototype) {  
  // Image is supported.
} else {  
  // Image is NOT supported.
}

Chrome 扩展程序更改

Chrome 扩展程序有一个通知模板的概念 更改它们后的行为方式会有所不同

图片通知模板将不再显示该图片。您应该确保 图片是补充性的，不一定对用户有用。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> chrome.notification API 中的图片模板的前后对比

列表通知模板将仅显示列表中的第一项。您 可以考虑恢复为基本通知样式并使用正文 对整组更改进行总结。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> chrome.notification API 中的列表模板的前后对比

进度通知会在通知标题中附加一个百分比值 来指示进度，而不是显示进度条。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> chrome.notification API 中进度模板的前后对比

通知界面的最后一个区别是，appIconMarkUrl 将 无法再在 macOS 上使用。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> chrome.notification API 中的 appIconMarkUrl 的前后对比