多樣化通知 API

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

豐富通知 API 可讓您使用範本建立通知,並在使用者系統匣中向使用者顯示這些通知:

系統使用者匣中的通知

顯示方式

複合式通知有四種不同類型:基本、圖片、清單和進度。所有通知都會包含標題、訊息、顯示在通知訊息左側的小圖示,以及 contextMessage 欄位 (以較淺的字型顏色顯示為第 3 個文字欄位)。

基本圖片:

基本通知

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

列出通知

圖片通知會顯示圖片預覽畫面:

圖片通知

進度通知會顯示進度列:

進度通知

行為方式

在 ChromeOS 中,通知會顯示在系統匣中,並保留在系統匣中,直到使用者關閉為止。系統匣會記錄所有新通知的數量。使用者在系統匣中看到通知後,計數就會重設為零。

通知的優先順序可設為 -2 到 2 之間。優先順序 < 0 的通知會顯示在 ChromeOS 通知中心,並在其他平台產生錯誤。優先順序 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.
}

建議在事件網頁中加入事件監聽器和處理常式,這樣即使應用程式或擴充功能未執行,通知也能彈出。