从 Chrome 59 开始,通过 Notifications API 或 系统将显示 chrome.notifications Extensions API 由 macOS 原生通知系统(而非 Chrome 自己的系统)直接发出。
这一变化使得 macOS 上的 Chrome 在与平台集成方面表现得更加出色 并修复了许多长期存在的错误 系统“勿扰”设置
下面我们将介绍此更改与现有 API。
通知中心
本次变更的好处之一就是 打开 macOS 的通知中心。
<ph type="x-smartling-placeholder">![Google Chrome 通知将显示在 macOS 通知中心内](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/google-chrome-notificatio-0dd272728498d.png?authuser=9&hl=el)
不同之处
图标大小和位置
图标的外观将发生变化。它们的尺寸更小,内边距为 。您可以考虑改为使用透明的背景图标 而不是纯色。
<ph type="x-smartling-placeholder">![Mac 版 Chrome 通知图标的显示前后对比
macOS。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-chrome-ma-8f7a9faf4b135.png?authuser=9&hl=el)
操作图标
在此次更改之前,操作按钮和图标会显示在 通知。对于原生通知,操作按钮图标 用户将需要将鼠标悬停在通知上并选择“更多” 按钮,查看可执行的操作。
<ph type="x-smartling-placeholder">![带有图标的通知操作按钮之前和之后
Chrome 与 macOS 显示的对比。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-acefa2d32d351.png?authuser=9&hl=el)
Chrome 徽标
Chrome 徽标将始终显示,且不能更换或更改。这个 是 macOS 上的第三方应用的一项要求。
图片
macOS 将不再支持 image
选项。如果您定义了一个映像
属性,因此通知仍会显示,但会忽略图片
参数(请参阅下面的示例)。
![macOS 上 Chrome 的前后对比通知图片。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-35cb1f20a7481.png?authuser=9&hl=el)
您可以使用以下代码实现功能检测图片支持:
if ('image' in Notification.prototype) {
// Image is supported.
} else {
// Image is NOT supported.
}
Chrome 扩展程序更改
Chrome 扩展程序有一个通知模板的概念 更改它们后的行为方式会有所不同
图片通知模板将不再显示该图片。您应该确保 图片是补充性的,不一定对用户有用。
<ph type="x-smartling-placeholder">![chrome.notification API 中的图片模板的前后对比情况。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-image-temp-ea8d68fe9acc.png?authuser=9&hl=el)
列表通知模板将仅显示列表中的第一项。您 可以考虑恢复为基本通知样式并使用正文 对整组更改进行总结。
<ph type="x-smartling-placeholder">![chrome.notification API 中的列表模板的前后对比。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-list-templ-58a8124f4c8f9.png?authuser=9&hl=el)
进度通知会在通知标题中附加一个百分比值 来指示进度,而不是显示进度条。
<ph type="x-smartling-placeholder">![chrome.notification API 中的进度模板的前后对比情况。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-progress-t-aeb9eb61ae795.png?authuser=9&hl=el)
通知界面的最后一个区别是,appIconMarkUrl
将
无法再在 macOS 上使用。
![chrome.notification API 中的 appIconMarkUrl 的前后对比。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-appiconmar-74e3f48314cd4.png?authuser=9&hl=el)