内容丰富的通知 API

平台差异:在 Chrome 版本 59 中,对于 Mac OS X 用户,通知的显示方式有所不同。用户看到的不是 Chrome 自己的通知,而是原生 Mac OS X 通知。要了解详情,请参阅这篇文章

借助富通知 API,您可以使用模板创建通知,并在用户的系统任务栏中向用户显示这些通知:

系统用户任务栏中的通知

外观

内容丰富的通知有四种不同类型:基本通知、图片通知、列表通知和进度通知。所有通知均包括标题、消息、显示在通知消息左侧的小图标,以及 contextMessage 字段,该字段显示为采用浅色字体的第三个文本字段。

基础映像:

基本通知

列表通知会显示任意数量的列表项:

列表通知

图片通知包含图片预览:

图片通知

进度通知会显示进度条:

进度通知

展示方式

在 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.
}

考虑在事件页面中添加事件监听器和处理程序,这样一来,即使应用或扩展程序未运行,通知也能弹出。