API Notifiche avanzate

Avviso:stai visualizzando la versione Manifest V2 deprecata di questo articolo. Consulta la sezione Manifest V3 - Notifiche avanzate per l'equivalente MV3. Il Chrome Web Store non accetta più estensioni Manifest V2. Segui la guida alla migrazione di Manifest V3 per convertire l'estensione in Manifest V3.

Differenza di piattaforma:nella versione 59 di Chrome, le notifiche vengono visualizzate in modo diverso per gli utenti di Mac OS X. Invece delle notifiche di Chrome, gli utenti vedono notifiche native di Mac OS X. Scopri di più in questo articolo.

L'API Notifiche avanzate 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, visualizzato come terzo campo di testo con un carattere più chiaro.

Un'immagine 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. Priorità < 0 vengono mostrati in ChromeOS centro notifiche e genera un errore su altre piattaforme. La priorità predefinita è 0. Priorità > 0 vengono mostrate per aumentarne la durata ed è possibile ricevere più notifiche con priorità elevata visualizzato nella barra delle applicazioni.

Nota:differenza nella piattaforma: la priorità code non influisce sull'ordine delle notifiche in Chrome 59 e versioni successive 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à, 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, 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 delle notifiche disponibili e il modo in cui vengono visualizzati.

Nota: valuta la possibilità di eseguire l'integrazione con GCM. Tieni sempre informati gli utenti, anche quando l'app non è aperta. L'esempio di notifiche gcm mostra una semplice integrazione tra GCM e l'API Rich Notifications.

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

Crea notifica immagine

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

Differenza di piattaforma: le immagini non verranno mostrate agli utenti che utilizzano Chrome 59 e versioni successive su Mac OS X.

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 rigoroso criterio di sicurezza del contenuto, questi URL devono indirizzare a un oppure utilizza un URL di dati o blob. Utilizza le proporzioni 3:2 per l'immagine. altrimenti un bordo nero incornicia l'immagine.

Notifica Crea elenco

Il modello list mostra items in un formato di elenco:

Differenza di piattaforma:solo il primo elemento dell'elenco viene mostrato agli utenti che utilizzano Chrome 59 e versioni successive su Mac OS X.

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

Notifica di avanzamento della creazione

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

Differenza di piattaforma:in Chrome 59 e versioni successive su Mac OS X, la barra di avanzamento viene visualizzata sotto forma di valore percentuale nel titolo della notifica anziché visualizzare una barra di avanzamento.

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 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 nella pagina degli eventi, in modo che le notifiche anche quando l'app o l'estensione non è in esecuzione.