API de notificações avançadas

A API Rich Notifications permite criar notificações usando modelos e mostrar essas para os usuários na bandeja do sistema:

Aparência

As notificações avançadas vêm em quatro tipos diferentes: básica, de imagem, de lista e de progresso. Todos as notificações incluem um título, uma mensagem e um pequeno ícone exibido à esquerda da notificação 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 da imagem:

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

Como eles se comportam

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

As notificações podem receber uma prioridade entre -2 e 2. Prioridades < 0 aparecem no ChromeOS central de notificações e produza um erro em outras plataformas. A prioridade 0 é a prioridade padrão. Prioridades > 0 são mostrados para aumentar a duração, e mais notificações de alta prioridade podem ser exibidos na bandeja do sistema.

Além de mostrar informações, todos os tipos de notificação podem incluir até dois itens de ação. 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-mail é aberto e ele pode responder:

Como desenvolvê-los

Para usar essa API, chame o método notifications.create, transmitindo os detalhes da notificação por o 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 esses detalhes 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, bem como um iconUrl, que é um link para um pequeno ícone que é exibido à esquerda do a mensagem de notificação.

Confira 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"
}

Nos Aplicativos do Google Chrome, devido a uma Política rígida de segurança de conteúdo, esses URLs precisam apontar para um recurso ou use um URL de dados ou blob. Use uma proporção de 3:2 para sua imagem. caso contrário, uma borda preta enquadra a imagem.

Criar notificação de lista

O modelo list exibe 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 exibe 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 de eventos e manipuladores de eventos que respondem às ações do usuário (consulte chrome.events). Por exemplo, você pode escrever um manipulador de eventos para responder a uma 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 poderá aparecer mesmo quando o app ou extensão não estiver em execução.