移至 macOS 上的原生通知系統

Paul Lewis
Stephen McGruer
Stephen McGruer

從 Chrome 59 版開始,系統會透過 Notification APIchrome.notifications 擴充功能 API 而不是 Chrome 自己的系統

這項變更能讓 macOS 上的 Chrome 與平台整合,帶來更順暢的整合體驗 並修正許多需要解決的問題,例如 Chrome 未遵循 系統的零打擾設定。

我們將在下方探討這項異動對現有 API 的部署作業。

通知中心

這項變更的其中一項好處是,系統會顯示下列位置的通知: macOS 的通知中心

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

相異處

圖示大小和定位

圖示的外觀會隨之改變。這樣會比較小,邊框間距: 已套用。建議您在背景中改用透明背景圖示 而不是單色,看起來更賞心悅目

Mac 版 Google Chrome 通知圖示的前後差異
    macOS。
Mac 版 Google 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 中的進度範本前後比較

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

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