移至 macOS 上的原生通知系統

Paul Lewis
史蒂芬麥克格瑞
Stephen McGruer

從 Chrome 59 版開始,macOS 原生通知系統會直接顯示透過 Notifications APIchrome.notifications Extensions API 傳送的通知,而不是 Chrome 的系統。

這項異動可讓 macOS 版 Chrome 與平台完美整合,並修正多項長期錯誤,例如 Chrome 不遵循「零打擾」模式的設定。

以下將說明這項調整在現有 API 中帶來的差異。

通知中心

這項異動的其中一項優點是,通知會顯示於 macOS 的通知中心。

Google Chrome 通知會顯示在 macOS 通知中心
Google Chrome 通知會顯示在 macOS 通知中心

差異

圖示大小和位置

圖示的顯示方式會隨即變更。尺寸較小,套用邊框間距。建議您改用透明背景圖示,而非純色,營造美學美感。

在 Mac 系統顯示的 Mac 通知圖示前後,以及 macOS 顯示的通知圖示之前和之後。
在 Chrome 顯示 Chrome 的 Mac 通知圖示前後,以及 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 中的進度範本前後對照

通知 UI 的最後一個差異在於 macOS 將不再使用 appIconMarkUrl

chrome.notification API 中 appIconMarkUrl 的前後對照。
chrome.notification API 中 appIconMarkUrl 的前後對照