從 Chrome 59 版開始,macOS 原生通知系統會直接顯示透過 Notifications API 或 chrome.notifications Extensions API 傳送的通知,而不是 Chrome 的系統。
這項異動可讓 macOS 版 Chrome 與平台完美整合,並修正多項長期錯誤,例如 Chrome 不遵循「零打擾」模式的設定。
以下將說明這項調整在現有 API 中帶來的差異。
通知中心
這項異動的其中一項優點是,通知會顯示於 macOS 的通知中心。
![Google Chrome 通知會顯示在 macOS 通知中心](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/google-chrome-notificatio-0dd272728498d.png?authuser=2&hl=zh-tw)
差異
圖示大小和位置
圖示的顯示方式會隨即變更。尺寸較小,套用邊框間距。建議您改用透明背景圖示,而非純色,營造美學美感。
![在 Mac 系統顯示的 Mac 通知圖示前後,以及 macOS 顯示的通知圖示之前和之後。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-chrome-ma-8f7a9faf4b135.png?authuser=2&hl=zh-tw)
動作圖示
這項變更動作按鈕和圖示必須先顯示在通知中。透過原生通知,系統就不會使用動作按鈕圖示,使用者需要將遊標懸停在通知上並選取「更多」按鈕,即可查看可用的動作。
![在通知動作按鈕 (含 Chrome 顯示圖示) 前後的前後,以及 macOS 顯示圖示的前後對照。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-notificati-acefa2d32d351.png?authuser=2&hl=zh-tw)
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=2&hl=zh-tw)
您可以使用下列程式碼,功能偵測圖片支援:
if ('image' in Notification.prototype) {
// Image is supported.
} else {
// Image is NOT supported.
}
Chrome 擴充功能異動
Chrome 擴充功能採用通知範本的概念,但是根據這項變更,採取的做法會有所不同。
圖片通知範本不會再顯示該圖片。您應確保映像檔為補充內容,且對使用者而言非必要。
![chrome.notification API 中圖片範本的前後對照設定。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-image-temp-ea8d68fe9acc.png?authuser=2&hl=zh-tw)
清單通知範本只會顯示清單中的第一個項目。建議您考慮改回基本通知樣式,並使用內文來總結變更內容。
![chrome.notification API 中清單範本的前後對照設定。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-list-templ-58a8124f4c8f9.png?authuser=2&hl=zh-tw)
進度通知會在通知標題附加百分比值,以表示進度,而不是進度列。
![在 chrome.notification API 中查看進度範本的前後對照圖。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-progress-t-aeb9eb61ae795.png?authuser=2&hl=zh-tw)
通知 UI 的最後一個差異在於 macOS 將不再使用 appIconMarkUrl
。
![chrome.notification API 中 appIconMarkUrl 的前後對照。](https://developer.chrome.google.cn/static/blog/native-mac-os-notifications/image/before-after-appiconmar-74e3f48314cd4.png?authuser=2&hl=zh-tw)