Богатый API уведомлений

API расширенных уведомлений позволяет создавать уведомления с использованием шаблонов и отображать эти уведомления пользователям в системном трее:

Как они выглядят

Расширенные уведомления бывают четырех типов: базовые, с изображением, в виде списка и с отображением прогресса. Все уведомления включают заголовок, сообщение, небольшой значок, отображаемый слева от сообщения уведомления, и поле contextMessage, которое отображается как третье текстовое поле более светлым шрифтом.

Базовое изображение:

В уведомлениях списка отображается любое количество элементов списка:

В уведомлениях об изображениях отображается предварительный просмотр изображения:

В уведомлениях о ходе выполнения отображается индикатор выполнения:

Как они себя ведут

В ChromeOS уведомления отображаются в системном трее пользователя и остаются там до тех пор, пока пользователь их не закроет. В системном трее хранится счетчик всех новых уведомлений. Как только пользователь увидит уведомление в системном трее, счетчик обнуляется.

Уведомлениям можно присвоить приоритет от -2 до 2. Приоритеты < 0 отображаются в центре уведомлений ChromeOS и приводят к ошибке на других платформах. Приоритетом по умолчанию является 0. Приоритеты > 0 отображаются с возрастающей длительностью, и в системном трее могут отображаться более приоритетные уведомления.

Помимо отображения информации, все типы уведомлений могут включать до двух пунктов действия. Когда пользователи нажимают на пункт действия, ваше приложение может отреагировать соответствующим действием. Например, когда пользователь нажимает на кнопку «Ответить», открывается почтовое приложение, и пользователь может завершить ответ:

Как их разработать

Для использования этого API вызовите метод notifications.create , передав сведения об уведомлении через параметр options :

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

Объект notifications.NotificationOptions должен содержать параметр notifications.TemplateType , определяющий доступные сведения об уведомлениях и способ их отображения.

Создать базовое уведомление

Все типы шаблонов ( basic , image , list и progress ) должны включать title и message уведомления, а также iconUrl , который представляет собой ссылку на небольшой значок, отображаемый слева от сообщения уведомления.

Вот пример basic шаблона:

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

Создать уведомление с изображением

Тип шаблона image также включает в себя imageUrl , который представляет собой ссылку на изображение, отображаемое в предварительном просмотре уведомления:

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

В приложениях Chrome, из-за строгой политики безопасности контента, эти URL-адреса должны указывать на локальный ресурс или использовать URL-адрес объекта типа BLOB или данных . Используйте соотношение сторон 3:2 для изображения; в противном случае изображение будет обрамлено черной рамкой.

Создать уведомление о списке

Шаблон list отображает items в формате списка:

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:

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

Рекомендуется добавить обработчики событий на страницу событий , чтобы уведомления появлялись даже тогда, когда приложение или расширение не запущено.