多樣化通知 API

平台差異:在 Chrome 59 版中,Mac OS X 使用者看到的通知方式會有所不同。使用者會看到 Mac OS X 原生通知,而不是 Chrome 本身的通知。詳情請參閱這篇文章

複合式通知 API 可讓您使用範本建立通知,並顯示這些通知 在系統匣中向使用者發送通知:

系統使用者匣中的通知

廣告外觀

豐富的通知提供四種不同類型:基本、圖片、清單和進度。所有語言 通知包括標題、訊息和顯示在通知左邊的小圖示 訊息和背景訊息欄位,以淺色字型顯示的第 3 個文字欄位。

基本圖片:

基本通知

清單通知會顯示任意數量的清單項目:

清單通知

圖片通知會包含圖片預覽:

圖片通知

進度通知會顯示進度列:

進度通知

行為模式

在 ChromeOS 中,通知會顯示在使用者的系統匣中,並持續顯示在系統匣中,直到 例如使用者關閉按鈕系統匣會列出所有新通知的數量。使用者看到 通知中,計數會重設為零。

通知的優先順序可在 -2 至 2 之間。優先順序 <ChromeOS 顯示 0 通知中心,對其他平台則產生錯誤。優先順序為 0。 優先順序 >顯示 0 代表增加時間長度,而高優先順序通知則可 顯示在系統匣中

除了顯示資訊以外,所有通知類型最多可以包含兩個操作項目。 使用者點選操作項目時,您的應用程式就能採取適當動作。例如: 當使用者按一下「回覆」時,電子郵件應用程式就會開啟,而使用者可以完成回覆:

通知中的操作

開發方式

如要使用這個 API,請呼叫 notifications.create 方法,並透過以下方式傳入通知詳細資料: options 參數:

chrome.notifications.create(id, options, creationCallback);

notifications.NotificationOptions 必須包含 notifications.TemplateType 定義可用的通知詳細資料以及其顯示方式。

建立基本通知

所有範本類型 (basicimagelistprogress) 都必須包含通知 titlemessage 以及 iconUrl,這是顯示在左側的小圖示連結 通知訊息

以下是 basic 範本的範例:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

建立圖片通知

image 範本類型也包含 imageUrl,這是預覽的圖片連結 通知:

平台差異:在 Mac OS X 上使用 Chrome 59 以上版本時,系統不會向使用者顯示圖片。
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

在 Chrome 應用程式中,基於嚴格的內容安全政策,這些網址必須指向本機 資源,或使用 blob 或資料網址。圖片應採用 3:2 的比例;否則為黑色框線 直到對圖片著色

建立清單通知

list 範本會以清單格式顯示 items

平台差異:在 Mac OS X 上,只有 Chrome 59 以上版本的使用者會看到第一個清單項目。
var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}

建立進度通知

progress 範本會顯示進度列,其中目前進度範圍為 0 到 100:

平台差異:在 Mac OS X 的 Chrome 59 以上版本中,進度列會以百分比值的形式顯示在通知標題中,不會顯示進度列。
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

監聽並回應事件

所有通知都可以包含會回應使用者動作的事件監聽器及事件處理常式 (請參閱 chrome.events).例如,您可以編寫事件處理常式來回應 notifications.onButtonClicked 事件。

事件監聽器:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

事件處理常式:

function replyBtnClick {
    //Write function to respond to user action.
}

建議您在事件頁面中加入事件監聽器和處理常式,以便收到通知 可能會在未執行應用程式或擴充功能時,顯示彈出式視窗。