Utilizzare l'API Notifications

L'API chrome.notifications ti consente di creare notifiche utilizzando modelli e mostrarle Notifiche per gli utenti nella barra delle applicazioni dell'utente:

Aspetto

Le notifiche avanzate sono disponibili in quattro diverse versioni: di base, immagine, elenco e avanzamento. Tutti le notifiche includono un titolo, un messaggio e una piccola icona visualizzata a sinistra della notifica e un campo contextMessage, che viene visualizzato come terzo campo di testo con un carattere più chiaro.

Una notifica di base:

Le notifiche elenco mostrano un numero qualsiasi di voci dell'elenco:

Le notifiche relative alle immagini includono un'anteprima dell'immagine:

Le notifiche di avanzamento mostrano una barra di avanzamento:

Comportamento

Su ChromeOS, le notifiche vengono visualizzate nella barra delle applicazioni dell'utente e rimangono nella barra delle applicazioni fino al l'utente li ignora. La barra delle applicazioni tiene il conto di tutte le nuove notifiche. Quando un utente vede notifiche nella barra delle applicazioni, il conteggio viene reimpostato su zero.

Alle notifiche può essere assegnata una priorità compresa tra -2 e 2. In ChromeOS vengono mostrate priorità inferiori a 0 centro notifiche e genera un errore su altre piattaforme. La priorità predefinita è 0. Le priorità superiori a 0 vengono mostrate per una durata maggiore, mentre è possibile ricevere più notifiche con priorità elevata visualizzato nella barra delle applicazioni.

L'impostazione priority non influisce sull'ordine delle notifiche su macOS.

Oltre a visualizzare le informazioni, tutti i tipi di notifiche possono includere fino a due attività. Quando gli utenti fanno clic su un'attività, l'estensione può rispondere con l'azione appropriata. Ad esempio: Quando l'utente fa clic su Rispondi, l'app email si apre e l'utente può completare la risposta:

Come svilupparle

Per utilizzare questa API, chiama il metodo notifications.create(), passando i dettagli della notifica utilizzando Il parametro options:

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

Il notifications.NotificationOptions deve includere un elemento notifications.TemplateType, che definisce i dettagli delle notifiche disponibili e il modo in cui vengono visualizzati.

Crea una notifica di base

Tutti i tipi di modello (basic, image, list e progress) devono includere una notifica title e message, nonché iconUrl, che è un link a una piccola icona visualizzata a sinistra di il messaggio di notifica.

Ecco un esempio di modello basic:

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

Utilizza un'immagine

Il tipo di modello image include anche un imageUrl, che è un link a un'immagine visualizzata in anteprima nella notifica. Tieni presente che le immagini non vengono mostrate agli utenti su macOS.

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

Crea una notifica relativa alla lista

Il modello list mostra items sotto forma di elenco. Tieni presente che gli utenti di macOS possono vedere solo il primo elemento.

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
}

Ascoltare gli eventi e rispondere

Tutte le notifiche possono includere listener e gestori di eventi che rispondono alle azioni dell'utente (vedi chrome.events). Ad esempio, puoi scrivere un gestore di eventi che risponda a un notifications.onButtonClicked.

Listener di eventi:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Gestore eventi:

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

Valuta la possibilità di includere listener e gestori di eventi all'interno del service worker, in modo che le notifiche anche quando l'estensione non è in esecuzione.