API de notificações avançadas

A API Rich Notifications permite criar notificações usando modelos e mostrá-las para os usuários na bandeja do sistema do usuário:

Aparência

Há quatro tipos de notificações avançadas: básica, de imagem, de lista e de progresso. Todas as notificações incluem um título, uma mensagem, um pequeno ícone exibido à esquerda da mensagem e um campo contextMessage, que é exibido como um terceiro campo de texto em uma fonte de cor mais clara.

Uma imagem básica:

As notificações de lista exibem qualquer número de itens da lista:

As notificações de imagem incluem uma visualização de imagem:

As notificações de progresso mostram uma barra de progresso:

Como eles se comportam

No ChromeOS, as notificações são exibidas na bandeja do sistema de um usuário e permanecem nessa bandeja até que o usuário as dispense. A bandeja do sistema mantém uma contagem de todas as notificações novas. Quando um usuário vê as notificações na bandeja do sistema, a contagem é redefinida para zero.

Notificações podem receber uma prioridade entre -2 e 2. As prioridades menores que 0 são mostradas na central de notificações do ChromeOS e produzem um erro em outras plataformas. A prioridade 0 é a padrão. Prioridades maiores que 0 são mostradas para aumentar a duração, e notificações de prioridade mais alta podem ser mostradas na bandeja do sistema.

Além de exibir informações, todos os tipos de notificação podem incluir até duas ações necessárias. Quando os usuários clicam em um item de ação, o app pode responder com a ação adequada. Por exemplo, quando o usuário clica em "Responder", o app de e-mails é aberto e o usuário pode concluir a resposta:

Como desenvolvê-los

Para usar essa API, chame o método notifications.create, transmitindo os detalhes da notificação pelo parâmetro options:

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

As notifications.NotificationOptions precisam incluir um notifications.TemplateType, que define os detalhes de notificação disponíveis e como eles são exibidos.

Criar notificação básica

Todos os tipos de modelo (basic, image, list e progress) precisam incluir uma notificação title e message, além de um iconUrl, que é um link para um pequeno ícone exibido à esquerda da mensagem de notificação.

Veja um exemplo de um modelo basic:

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

Criar notificação de imagem

O tipo de modelo image também inclui um imageUrl, que é um link para uma imagem visualizada na notificação:

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

Em apps do Chrome, devido a uma Política de Segurança de Conteúdo rigorosa, esses URLs precisam apontar para um recurso local ou usar um blob ou URL de dados. Use uma proporção de 3:2 para a imagem. Caso contrário, uma borda preta enquadra a imagem.

Criar notificação de lista

O modelo list mostra items em um formato de lista:

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

Criar notificação de progresso

O modelo progress mostra uma barra de progresso em que o progresso atual varia de 0 a 100:

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

Como detectar e responder a eventos

Todas as notificações podem incluir listeners e manipuladores de eventos que respondem às ações do usuário (consulte chrome.events). Por exemplo, é possível criar um manipulador de eventos para responder a um evento notifications.onButtonClicked.

Listener de eventos:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

manipulador de eventos:

function replyBtnClick {
    //Write function to respond to user action.
}

Considere incluir listeners e manipuladores de eventos na página de eventos para que as notificações possam aparecer mesmo quando o app ou a extensão não estiver em execução.