API Notifiche avanzate

L'API Rich Notifications consente di creare notifiche utilizzando modelli e di mostrarle agli utenti nella barra delle applicazioni:

Il loro aspetto

Le notifiche avanzate sono disponibili in quattro tipi diversi: 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 con un carattere di colore più chiaro.

Un'immagine 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é non vengono chiuse. 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à < 0 vengono visualizzate nel centro notifiche di ChromeOS e generano un errore su altre piattaforme. La priorità 0 è la priorità predefinita. Le priorità > 0 vengono visualizzate per una durata crescente e nella barra delle applicazioni possono essere visualizzate più notifiche con priorità elevata.

Oltre a mostrare informazioni, tutti i tipi di notifiche possono includere fino a due elementi di azione. Quando gli utenti fanno clic su un'attività, la tua app 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 tramite il parametro options:

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

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

Crea 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"
}

Creare una notifica con immagine

Il tipo di modello image include anche un imageUrl, ovvero un link a un'immagine visualizzata in anteprima all'interno della notifica:

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

Nelle app di Chrome, a causa di un rigido Content Security Policy, questi URL devono rimandare a una risorsa locale o utilizzare un URL blob o dati. Utilizza un rapporto 3:2 per l'immagine, altrimenti viene visualizzato un bordo nero che la incornicia.

Creare una notifica di elenco

Il modello list mostra items in formato elenco:

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."}]
}

Crea notifica di avanzamento

Il modello progress mostra una barra di avanzamento in cui l'avanzamento attuale varia da 0 a 100:

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

Ascolto e risposta agli eventi

Tutte le notifiche possono includere listener di eventi e gestori di eventi che rispondono alle azioni dell'utente (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.
}

Valuta la possibilità di includere listener e gestori di eventi nella pagina degli eventi, in modo che le notifiche possano essere visualizzate anche quando l'app o l'estensione non è in esecuzione.