A API chrome.notifications
permite criar notificações usando modelos e mostrar essas
notificações aos usuários na bandeja do sistema do usuário:
Aparência
As notificações avançadas têm quatro tipos diferentes: básica, de imagem, de lista e de progresso. Todas
as notificações incluem um título, uma mensagem, um pequeno ícone mostrado à esquerda da mensagem
de notificação e um campo contextMessage
, que é mostrado como um terceiro campo de texto em uma fonte de cor mais clara.
Uma notificação 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:
Como eles se comportam
No ChromeOS, as notificações são mostradas na bandeja do sistema do 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.
As 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 geram um erro em outras plataformas. A prioridade padrão é 0. As 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.
A configuração priority
não afeta a ordem das notificações no macOS.
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, sua extensão 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 responder:
Como desenvolvê-los
Para usar essa API, chame o método notifications.create()
, transmitindo os detalhes da notificação com o parâmetro options
:
await chrome.notifications.create(id, options);
O notifications.NotificationOptions
precisa incluir um notifications.TemplateType
, que
define os detalhes de notificação disponíveis e como eles são mostrados.
Criar uma 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 mostrado à esquerda da
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"
}
Usar uma imagem
O tipo de modelo image
também inclui um imageUrl
, que é um link para uma imagem que é visualizada
na notificação. As imagens não são exibidas para os usuários no macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Criar uma notificação de lista
O modelo list
mostra items
em um formato de lista. Observe que apenas o primeiro item aparece para os usuários no macOS.
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."}]
}```
### Create progress notification {: #progress }
The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.
```js
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 de eventos 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 gerenciadores de eventos no service worker para que as notificações possam aparecer mesmo quando a extensão não estiver em execução.