Utilizzare l'API Notifications

L'API browser.notifications ti consente di creare notifiche utilizzando i modelli e di mostrarle agli utenti nella barra delle applicazioni:

Aspetto

Le notifiche avanzate sono disponibili in quattro tipi diversi: base, immagine, elenco e stato. Tutte le notifiche includono un titolo, un messaggio, una piccola icona visualizzata a sinistra del messaggio di notifica e un campo contextMessage, visualizzato come terzo campo di testo con un carattere di colore più chiaro.

Una notifica di base:

Le notifiche degli elenchi mostrano un numero qualsiasi di elementi dell'elenco:

Le notifiche delle immagini includono un'anteprima dell'immagine:

Le notifiche di avanzamento mostrano una barra di avanzamento:

Come si comporta

Su ChromeOS, le notifiche vengono visualizzate nella barra delle applicazioni di un utente e rimangono lì finché l'utente non le chiude. La barra delle applicazioni tiene il conto di tutte le nuove notifiche. Una volta che gli utenti visualizzano le notifiche nella barra delle applicazioni, il conteggio viene reimpostato su zero.

Alle notifiche può essere assegnata una priorità compresa tra -2 e 2. Le priorità inferiori a 0 vengono visualizzate nel centro notifiche di ChromeOS e generano un errore su altre piattaforme. La priorità predefinita è 0. Le priorità superiori a 0 vengono visualizzate per una durata crescente e nella barra delle applicazioni possono essere visualizzate più notifiche ad alta priorità.

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

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

Come svilupparli

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

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

notifications.NotificationOptions deve includere un notifications.TemplateType, che definisce i dettagli di notifica disponibili e la modalità di visualizzazione.

Creare una notifica di base

Tutti i tipi di modelli (basic, image, list e progress) devono includere una notifica title e message, nonché un iconUrl, ovvero un link a una piccola icona visualizzata a sinistra del 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, ovvero un link a un'immagine visualizzata in anteprima all'interno della 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"
}

Creare una notifica di elenco

Il modello list mostra items in formato elenco. Tieni presente che agli utenti su macOS viene visualizzato 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 di eventi e gestori di eventi che rispondono alle azioni dell'utente (vedi browser.events). Ad esempio, puoi scrivere un gestore di eventi per rispondere a un evento notifications.onButtonClicked.

Listener di eventi:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

Gestore di eventi:

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

Valuta la possibilità di includere listener ed handler di eventi nel service worker, in modo che le notifiche possano essere visualizzate anche quando l'estensione non è in esecuzione.