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

Paul Lewis
斯蒂芬·麦格鲁尔
Stephen McGruer

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

这一变更让 macOS 上的 Chrome 更好地与平台集成,并修复了许多长期存在的错误,例如 Chrome 不遵循系统的“勿扰”设置。

下面我们来看看此变更对现有 API 带来的差异。

通知中心

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

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

不同点

图标大小和位置

图标的外观将发生变化。它们的尺寸更小,并且采用了内边距。为了美观,您可能需要考虑改用透明背景图标(而非纯色)。

Chrome 与 macOS 显示的 Mac 版 Chrome 前后对比通知图标。
Chrome 和 macOS 显示的 Mac 版 Chrome 通知图标前后对比

操作图标

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

通知操作按钮之前和之后,带有 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 中进度模板的前后对比

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

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