Usar a API Notifications

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:

Notificações na bandeja do usuário do sistema

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:

Notificação básica

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

Notificação de lista

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

Notificação de imagem

As notificações de progresso mostram uma barra:

Notificação de progresso

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:

Ação na notificação

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.