Visualizzazione di una notifica

Le opzioni di notifica sono suddivise in due sezioni: una che tratta gli aspetti visivi (questa sezione) e l'altra che spiega gli aspetti comportamentali delle notifiche (la prossima sezione).

Puoi sperimentare varie opzioni di notifica in vari browser su varie piattaforme utilizzando il Generatore di notifiche di Peter Beverloo.

Opzioni visive

L'API per mostrare una notifica è semplice:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Entrambi gli argomenti, title e options, sono facoltativi.

Il titolo è una stringa e le opzioni possono essere una delle seguenti:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

Diamo un'occhiata alle opzioni visive:

Dissezione dell&#39;interfaccia utente di una notifica.

Opzioni per titolo e corpo

Ecco l'aspetto di una notifica senza titolo e opzioni in Chrome su Windows:

Notifica senza titolo e opzioni in Chrome su Windows.

Come puoi vedere, il nome del browser viene utilizzato come titolo e il segnaposto "Nuova notifica" viene utilizzato come corpo della notifica.

Se sul dispositivo è installata un'applicazione web progressiva, al posto del nome del browser verrà utilizzato il nome dell'app web:

Notifica con il nome dell&#39;app web anziché il nome del browser.

Se abbiamo eseguito il seguente codice:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

riceveremo questa notifica in Chrome su Linux:

Notifica con titolo e corpo del testo in Chrome su Linux.

In Firefox su Linux, il funzionamento è il seguente:

Notifica con titolo e corpo del testo in Firefox su Linux.

Ecco l'aspetto della notifica con molto testo nel titolo e nel corpo in Chrome su Linux:

Notifica con titolo lungo e corpo del testo in Chrome su Linux.

Firefox su Linux comprime il corpo del testo finché non passi il mouse sopra la notifica, espandendola:

Notifica con titolo lungo e corpo del testo in Firefox su Linux.

Notifica con titolo e corpo del testo lunghi in Firefox su Linux mentre si passa il mouse sopra la notifica con il cursore del mouse.

Le stesse notifiche in Firefox su Windows hanno il seguente aspetto:

Notifica con titolo e corpo del testo in Firefox su Windows.

Notifica con titolo e corpo del testo lunghi in Firefox su Windows.

Come puoi vedere, la stessa notifica potrebbe avere un aspetto diverso a seconda del browser. Potrebbe anche avere un aspetto diverso nello stesso browser su piattaforme diverse.

Chrome e Firefox utilizzano le notifiche di sistema e il centro notifiche sulle piattaforme in cui sono disponibili.

Ad esempio, le notifiche di sistema su macOS non supportano immagini e azioni (pulsanti e risposte incorporate).

Chrome ha anche delle notifiche personalizzate per tutte le piattaforme desktop. Puoi abilitarlo impostando il flag chrome://flags/#enable-system-notifications sullo stato Disabled.

Icona

L'opzione icon è essenzialmente una piccola immagine che puoi mostrare accanto al titolo e al corpo del testo.

Nel codice devi specificare l'URL dell'immagine da caricare:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Ricevi questa notifica in Chrome su Linux:

Notifica con icona in Chrome su Linux.

e in Firefox su Linux:

Notifica con icona in Firefox su Linux.

Purtroppo non esistono linee guida sulle dimensioni delle immagini da utilizzare per un'icona.

Android sembra volere un'immagine da 64 dp, che corrisponde a multipli di 64 px in base alle proporzioni pixel del dispositivo.

Supponendo che il rapporto pixel più elevato per un dispositivo sia 3, un'icona di dimensioni pari o superiori a 192 px è una scommessa.

Badge

badge è una piccola icona monocromatica utilizzata per mostrare all'utente ulteriori informazioni sulla provenienza della notifica:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Al momento della scrittura, il badge è utilizzato solo in Chrome su Android.

Notifica con badge in Chrome su Android.

Su altri browser (o su Chrome senza il badge), vedrai un'icona del browser.

Notifica con badge in Firefox su Android.

Come per l'opzione icon, non esistono linee guida reali sulle dimensioni da utilizzare.

Esaminando le linee guida di Android, la dimensione consigliata è 24 px moltiplicati per il rapporto pixel del dispositivo.

Significa che un'immagine di almeno 72 px dovrebbe essere buona (supponendo un rapporto pixel massimo del dispositivo pari a 3).

Immagine

L'opzione image può essere utilizzata per mostrare all'utente un'immagine più grande. Ciò è particolarmente utile per mostrare all'utente un'immagine di anteprima.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

In Chrome su Linux, la notifica sarà simile alla seguente:

Notifica con immagine in Chrome su Linux.

In Chrome su Android, le opzioni di ritaglio e proporzioni sono diverse:

Notifica con immagine in Chrome su Android.

Date le differenze nel rapporto tra computer e dispositivi mobili, è estremamente difficile suggerire linee guida.

Poiché Chrome su computer non riempie lo spazio disponibile e ha un rapporto di 4:3, forse l'approccio migliore è pubblicare un'immagine con queste proporzioni e consentire ad Android di ritagliarla. Detto questo, l'opzione image potrebbe comunque cambiare.

Su Android, l'unica linea guida è una larghezza di 450 dp.

Utilizzando questa linea guida, un'immagine con larghezza minima di 1350 px sarebbe una buona scommessa.

Azioni (pulsanti)

Puoi definire actions in modo che mostrino i pulsanti con una notifica:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Per ogni azione puoi definire un title, un action (che è essenzialmente un ID), un icon e un type. Il titolo e l'icona sono quelli che puoi vedere nella notifica. L'ID viene utilizzato per rilevare che è stato fatto clic sul pulsante di azione (scopri di più nella prossima sezione). Il tipo può essere omesso perché 'button' è il valore predefinito.

Al momento della scrittura solo per le azioni relative all'assistenza di Chrome e Opera per Android.

Nell'esempio precedente sono definite quattro azioni a dimostrazione che è possibile definire più azioni di quante verranno visualizzate. Se vuoi conoscere il numero di azioni che verranno visualizzate dal browser, puoi controllare window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

Sui computer, le icone dei pulsanti di azione mostrano i relativi colori (vedi l'anello rosa):

Notifica con pulsanti di azione su Chrome su Linux.

Su Android 6 e versioni precedenti, le icone sono colorate in base alla combinazione di colori del sistema:

Notifica con pulsanti di azione su Chrome per Android.

Su Android 7 e versioni successive, le icone delle azioni non vengono visualizzate affatto.

Chrome dovrebbe modificare il suo comportamento sul computer per adattarlo ad Android (ovvero applicare la combinazione di colori appropriata per far sì che le icone corrispondano all'aspetto e al design del sistema). Nel frattempo, puoi scegliere lo stesso colore del testo di Chrome impostando il colore #333333 per le icone.

Vale anche la pena sottolineare che le icone hanno un aspetto nitido su Android, ma non sui computer.

La dimensione migliore che potevo fare per lavorare su Chrome per computer desktop era 24 x 24 pixel. Purtroppo sembra fuori posto su Android.

La best practice che possiamo trarre da queste differenze:

  • Utilizza una combinazione di colori coerente per le icone in modo che almeno tutte le icone vengano mostrate all'utente in modo coerente.
  • Assicurati che funzionino in monocromatico, perché alcune piattaforme potrebbero visualizzarle in questo modo.
  • Prova la taglia e scopri quella più adatta alle tue esigenze. 128 px × 128 px funziona bene su Android per me, ma era di scarsa qualità sul desktop.
  • È normale che le icone delle azioni non vengano visualizzate.

Le specifiche delle notifiche stanno valutando un modo per definire più dimensioni delle icone, ma sembra che sia necessario un po' di tempo per trovare un accordo.

Azioni (risposte incorporate)

Puoi aggiungere una risposta incorporata alla notifica definendo un'azione con il tipo 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Ecco come si presenta su Android:

Notifica su Android con un pulsante di azione di risposta.

Se fai clic sul pulsante di azione si apre un campo di immissione di testo:

Notifica su Android con un campo di immissione di testo aperto.

Puoi personalizzare il segnaposto per il campo di immissione testo:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Notifica su Android con segnaposto personalizzato per il campo di immissione testo.

In Chrome su Windows, il campo di immissione di testo è sempre visibile senza dover fare clic sul pulsante di azione:

Notifica su Windows con un campo di immissione testo e un pulsante di azione per la risposta.

Puoi aggiungere più di una risposta in linea o combinare pulsanti e risposte in linea:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

Notifica su Windows con un campo di immissione di testo e due pulsanti di azione.

Direzione

Il parametro dir consente di definire la direzione in cui deve essere visualizzato il testo, da destra a sinistra o da sinistra a destra.

Durante il test, sembrava che la direzione fosse in gran parte determinata dal testo anziché da questo parametro. In base alle specifiche, lo scopo è suggerire al browser come layout di opzioni come le azioni, ma non ho notato alcuna differenza.

Probabilmente è meglio definire se puoi, altrimenti il browser dovrebbe fare la cosa giusta in base al testo fornito.

Il parametro deve essere impostato su auto, ltr o rtl.

Una lingua da destra a sinistra utilizzata in Chrome su Linux è simile alla seguente:

Notifica con lingua da destra a sinistra in Chrome su Linux.

In Firefox (passando il mouse sopra), vedrai quanto segue:

Notifica con lingua da destra a sinistra in Firefox su Linux.

Vibra

L'opzione vibrazione consente di definire un tipo di vibrazione da attivare quando viene visualizzata una notifica, a condizione che le impostazioni correnti dell'utente consentano l'attivazione delle vibrazioni (ovvero il dispositivo non sia in modalità silenziosa).

Il formato dell'opzione di vibrazione deve essere un array di numeri che descrivono il numero di millisecondi in cui il dispositivo dovrebbe vibrare, seguito dal numero di millisecondi in cui il dispositivo non deve vibrare.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

Questa operazione riguarda soltanto i dispositivi che supportano la vibrazione.

Audio

Il parametro audio consente di definire un suono da riprodurre quando viene ricevuta la notifica.

Al momento, nessun browser supporta questa opzione.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Timestamp

Il timestamp ti consente di indicare alla piattaforma quando si è verificato un evento che ha generato l'invio della notifica push.

timestamp dovrebbe essere il numero di millisecondi a partire dalle ore 00:00:00 UTC, ossia il 1° gennaio 1970 (ossia l'epoca di UNIX).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

Best practice per l'UX

Il più grande errore dell'UX che ho riscontrato con le notifiche è la mancanza di specificità nelle informazioni mostrate da una notifica.

Dovresti prima valutare il motivo per cui hai inviato il messaggio push e assicurarti che tutte le opzioni di notifica siano utilizzate per aiutare gli utenti a capire perché stanno leggendo la notifica.

In tutta sincerità, è facile vedere degli esempi e pensare "Non farò mai questo errore". Ma è più facile cadere in quella trappola di quanto pensi.

Alcuni errori comuni da evitare:

  • Non inserire il tuo sito web nel titolo o nel corpo. I browser includono il tuo dominio nella notifica, quindi non duplicarlo.
  • Usa tutte le informazioni a tua disposizione. Se invii un messaggio push perché qualcuno ha inviato un messaggio a un utente, invece di utilizzare il titolo "Nuovo messaggio" e il corpo di "Fai clic qui per leggere", utilizza il titolo "Mario ha appena inviato un nuovo messaggio" e imposta il corpo della notifica su una parte del messaggio.

Browser e rilevamento delle funzionalità

Al momento della scrittura, c'è una grande disparità tra Chrome e Firefox in termini di supporto delle funzionalità delle notifiche.

Fortunatamente, puoi rilevare il supporto delle funzionalità di notifica esaminando il prototipo window.Notification.

Supponiamo di voler sapere se una notifica supporta i pulsanti di azione:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

In questo modo, potremmo modificare la notifica che mostriamo agli utenti.

Per le altre opzioni, ripeti l'operazione precedente e sostituisci 'actions' con il nome del parametro desiderato.

Passaggi successivi

Codelab