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

Paul Lewis
Stephen McGruer
Stephen McGruer

从 Chrome 59 开始,通过 Notifications APIchrome.notifications 扩展程序 API 发送的通知将直接由 macOS 原生通知系统(而非 Chrome 自己的系统)显示。

此项更改让 macOS 上的 Chrome 与平台的集成更加紧密,并修复了一些长期存在的 bug,例如 Chrome 不遵循系统勿扰模式设置。

下面我们来看看此更改与现有 API 的不同之处。

通知中心

此项变更的一个好处是,通知将显示在 macOS 的通知中心内。

Google Chrome 通知将显示在 macOS 通知中心内
Google Chrome 通知将显示在 macOS 通知中心

不同之处

图标大小和位置

图标的外观将发生变化。它们的大小会更小,并且会应用内边距。为了美观起见,您不妨考虑改用透明背景图标,而不是纯色图标。

在 Mac 上使用 Chrome 前后的通知图标对比:Chrome 显示的通知图标与 macOS 显示的通知图标。
Mac 版 Chrome 显示的通知图标与 macOS 显示的通知图标使用前后对比

操作图标

在此次更改之前,操作按钮和图标会显示在通知中。对于原生通知,系统不会使用操作按钮图标,用户需要将鼠标悬停在通知上,然后选择“更多”按钮才能查看可用的操作。

通知操作按钮的图标在 Chrome 和 macOS 中显示的前后对比。
通知操作按钮的变化:Chrome 显示的图标与 macOS 显示的图标

Chrome 徽标将始终显示,且无法替换或更改。这是 macOS 上第三方应用的要求。

图片

macOS 不再支持 image 选项。如果您定义了图片属性,系统仍会显示通知,但会忽略图片参数(请参阅以下示例)。

macOS 上 Chrome 通知图片的更新前后对比。
macOS 版 Chrome 通知图片的变化前后

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

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

Chrome 扩展程序更改

Chrome 扩展程序具有通知模板的概念,此概念在此次变更后将会表现出不同的行为。

图片通知模板将不再显示图片。您应确保图片是补充性图片,对用户而言不是必需的。

chrome.notification API 中的图片模板的前后对比情况。
chrome.notification API 中图片模板的变化前后

列表通知模板只会显示列表中的第一项。您不妨考虑改回基本通知样式,并使用正文文本总结一组更改。

chrome.notification API 中列表模板的之前和之后。
chrome.notification API 中列表模板的之前和之后

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

chrome.notification API 中进度模板的之前和之后。
chrome.notification API 中进度模板的之前和之后

通知界面中的最后一项差异是,appIconMarkUrl 将不再在 macOS 上使用。

chrome.notification API 中的 appIconMarkUrl 的前后对比。
chrome.notification API 中的 appIconMarkUrl 的前后对比