API расширенных уведомлений,API расширенных уведомлений

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

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

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

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

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

Уведомления об изображениях включают предварительный просмотр изображения:

Уведомления о ходе выполнения показывают индикатор выполнения:

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

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

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

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

Как их развивать

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

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

Уведомления.NotificationOptions должны включать уведомления.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-адрес большого двоичного объекта или данных . Используйте соотношение сторон 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.
}

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