L'API chrome.notifications ti consente di creare notifiche utilizzando i modelli e di mostrare queste notifiche agli utenti nella barra delle applicazioni:
Aspetto
Le notifiche avanzate sono disponibili in quattro tipi diversi: di base, immagine, elenco e avanzamento. 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 in un carattere di colore più chiaro.
Una notifica di base:
Le notifiche dell'elenco mostrano un numero qualsiasi di voci dell'elenco:
Le notifiche relative alle immagini includono un'anteprima dell'immagine:
Le notifiche relative all'avanzamento mostrano una barra di avanzamento:
Come si comporta
Su ChromeOS, le notifiche vengono visualizzate nella barra delle applicazioni dell'utente e rimangono nella barra delle applicazioni finché l'utente non le ignora. La barra delle applicazioni tiene un conteggio di tutte le nuove notifiche. Quando un utente visualizza 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 mostrate nel Centro notifiche di ChromeOS e generano un errore su altre piattaforme. La priorità predefinita è 0. Le priorità maggiori di 0 vengono mostrate per aumentare la durata e nella barra delle applicazioni possono essere visualizzate più notifiche ad alta priorità.
L'impostazione priority non influisce sull'ordine delle notifiche su macOS.
Tutti i tipi di notifiche, oltre a visualizzare le informazioni, possono includere fino a due attività. Quando gli utenti fanno clic su un'attività, la tua 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 svilupparle
Per utilizzare questa API, chiama il metodo notifications.create(), trasmettendo i dettagli della notifica utilizzando
il parametro options:
await chrome.notifications.create(id, options);
L'elemento notifications.NotificationOptions deve includere un elemento notifications.TemplateType, che
definisce i dettagli di notifica disponibili e la modalità di visualizzazione di tali dettagli.
Creare una notifica di base
Tutti i tipi di modello (basic, image, list e progress) devono includere una notifica title e message, nonché un iconUrl, che è 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"
}
Crea una notifica relativa a un elenco
Il modello list mostra items in formato elenco. Tieni presente che solo il primo elemento viene mostrato agli utenti su 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
}
Ascoltare e rispondere agli eventi
Tutte le notifiche possono includere listener di eventi e gestori di eventi che rispondono alle azioni degli utenti (vedi chrome.events). Ad esempio, puoi scrivere un gestore di eventi per rispondere a un evento notifications.onButtonClicked.
Listener di eventi:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Gestore di eventi:
function replyBtnClick {
//Write function to respond to user action.
}
Potresti includere listener e gestori di eventi all'interno del service worker, in modo che le notifiche possano apparire anche quando l'estensione non è in esecuzione.