API расширенных уведомлений,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);

Уведомления.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 , который является ссылкой на изображение, которое просматривается в уведомлении:

Разница в платформе: изображения не будут отображаться пользователям Chrome версии 59+ в Mac OS X.
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 в формате списка:

Разница в платформе: пользователям Chrome версии 59+ в Mac OS X отображается только первый элемент списка.
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:

Разница между платформами: в Chrome версии 59+ в Mac OS X индикатор выполнения отображается в виде процентного значения в заголовке уведомления, а не в виде индикатора выполнения.
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.
}

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