A API de notificações avançadas permite criar notificações usando modelos e mostrar essas notificações aos usuários na bandeja do sistema:
Como elas aparecem
As notificações avançadas vêm em quatro tipos diferentes: básicas, de imagem, de lista e de progresso. Todas as notificações incluem um título, uma mensagem, um ícone pequeno exibido à esquerda da mensagem de 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 mostram qualquer número de itens de lista:
As notificações de imagem incluem uma visualização da imagem:
As notificações de progresso mostram uma barra de progresso:
Como elas se comportam
No ChromeOS, as notificações aparecem na bandeja do sistema de um usuário e permanecem lá até que o usuário as dispense. A bandeja do sistema mantém uma contagem de todas as novas notificações. Quando um usuário vê as notificações na bandeja do sistema, a contagem é redefinida para zero.
As notificações podem receber uma prioridade entre -2 e 2. As prioridades < 0 são mostradas na Central de notificações do ChromeOS e produzem um erro em outras plataformas. A prioridade 0 é a padrão. As prioridades > 0 são mostradas por uma duração crescente, e mais notificações de alta prioridade podem ser exibidas 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 uma ação necessária, seu app pode responder com a ação apropriada. Por exemplo, quando o usuário clica em "Responder", o app de e-mail é aberto e o usuário pode concluir a resposta:
Como desenvolver
Para usar essa API, chame o método notifications.create, transmitindo os detalhes da notificação via
o options parâmetro:
chrome.notifications.create(id, options, creationCallback);
O notifications.NotificationOptions precisa incluir um notifications.TemplateType, que define os detalhes de notificação disponíveis e como eles são mostrados.
Criar notificação básica
Todos os tipos de modelo (basic, image, list e progress) precisam incluir um title e uma message de notificação, bem como um iconUrl, que é um link para um ícone pequeno exibido à esquerda da mensagem de notificação.
Confira um exemplo de 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 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 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
}
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 escrever um manipulador de eventos para responder a um notifications.onButtonClicked evento.
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.