API Notifiche avanzate

L'API Rich Notifications consente di creare notifiche utilizzando modelli e di mostrare queste notifiche agli utenti nella barra delle applicazioni dell'utente:

Aspetto

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

Un'immagine di base:

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

Le notifiche relative alle immagini includono un'anteprima delle immagini:

Le notifiche di 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 il conto 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 ed è possibile visualizzare un numero maggiore di notifiche con priorità elevata nella barra delle applicazioni.

Tutti i tipi di notifica, oltre alle informazioni, possono includere fino a due attività. 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 svilupparle

Per utilizzare questa API, chiama il metodo notifications.create, trasmettendo i dettagli della notifica tramite il parametro options:

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

Il parametro notifications.NotificationOptions deve includere un valore notifications.TemplateType per definire i dettagli delle notifiche disponibili e la relativa modalità di visualizzazione.

Crea notifica di base

Tutti i tipi di modello (basic, image, list e progress) devono includere una notifica title e message, nonché una 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"
}

Crea notifica 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 rigidi Criteri di sicurezza del contenuto, questi URL devono indirizzare a una risorsa locale o utilizzare un URL blob o dati. Utilizza proporzioni 3:2 per l'immagine. In caso contrario, l'immagine viene cornice con un bordo nero.

Crea notifica 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 va da 0 a 100:

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

Potresti includere listener e gestori di eventi all'interno della pagina dell'evento, in modo che le notifiche possano apparire anche quando l'app o l'estensione non è in esecuzione.