Le opzioni di notifica sono suddivise in due sezioni: una che riguarda gli aspetti visivi (questa sezione) e una che spiega gli aspetti comportamentali delle notifiche (la sezione successiva).
Puoi sperimentare varie opzioni di notifica in diversi 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:
Opzioni per titolo e corpo
Ecco come appare una 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, verrà utilizzato il nome dell'app web anziché il nome del browser:
Se eseguiamo il seguente codice:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
riceveremmo questa notifica in Chrome su Linux:
In Firefox su Linux, l'aspetto sarà il seguente:
Ecco come appare la notifica con molto testo nel titolo e nel corpo in Chrome su Linux:
Firefox su Linux comprime il corpo del testo finché non passi il mouse sopra la notifica, espandendola:
Le stesse notifiche in Firefox su Windows hanno il seguente aspetto:
Come puoi vedere, la stessa notifica può avere un aspetto diverso in browser diversi. 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 dispone anche di notifiche personalizzate per tutte le piattaforme desktop. Puoi attivarlo 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 fornire un URL per l'immagine che vuoi caricare:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Ricevi questa notifica in Chrome su Linux:
e in Firefox su Linux:
Purtroppo non esistono linee guida precise sulle dimensioni dell'immagine da utilizzare per un'icona.
Android sembra richiedere un'immagine da 64 dp (ovvero 64 px moltiplicati per il rapporto pixel del dispositivo).
Supponendo che il rapporto pixel più alto per un dispositivo sia 3, una dimensione dell'icona di 192 px o più è una scelta sicura.
Badge
La badge è una piccola icona monocromatica che viene utilizzata per fornire all'utente qualche informazione in più sulla provenienza della notifica:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Al momento della stesura di questo articolo, il badge viene utilizzato solo in Chrome su Android.
Su altri browser (o su Chrome senza il badge), vedrai l'icona del browser.
Come per l'opzione icon, non esistono linee guida reali sulle dimensioni da utilizzare.
Consultando le linee guida di Android, la dimensione consigliata è 24 px moltiplicata per il rapporto pixel del dispositivo.
Ciò significa che un'immagine di almeno 72 px dovrebbe essere sufficiente (supponendo un rapporto pixel del dispositivo massimo di 3).
Immagine
L'opzione image può essere utilizzata per mostrare all'utente un'immagine più grande. Questo è particolarmente utile per mostrare un'immagine di anteprima all'utente.
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:
In Chrome su Android, il ritaglio e il rapporto sono diversi:
Date le differenze di proporzioni tra desktop 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 questo rapporto 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.
In base a questa linea guida, un'immagine con una larghezza di almeno 1350 px sarebbe una buona scelta.
Azioni (pulsanti)
Puoi definire actions per visualizzare 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 ciò che puoi vedere nella notifica. L'ID viene utilizzato per rilevare
che è stato fatto clic sul pulsante di azione (maggiori informazioni nella sezione successiva). Il tipo può essere omesso perché 'button' è il valore predefinito.
Al momento della stesura di questo articolo, solo Chrome e Opera per Android supportano le azioni.
Nell'esempio precedente sono definite quattro azioni per illustrare che puoi definire più azioni di quelle che 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.';
}
Su computer, le icone dei pulsanti di azione mostrano i loro colori (vedi la ciambella rosa):
Su Android 6 e versioni precedenti, le icone sono colorate in modo da corrispondere alla combinazione di colori del sistema:
Su Android 7 e versioni successive, le icone delle azioni non vengono visualizzate affatto.
Si spera che Chrome modifichi il suo comportamento su computer per adattarsi ad Android (ovvero applicare la combinazione di colori appropriata per far corrispondere le icone all'aspetto del sistema). Nel frattempo, puoi abbinare il colore del testo di Chrome impostando il colore delle icone su #333333.
Vale anche la pena sottolineare che le icone appaiono nitide su Android, ma non su computer.
La dimensione migliore che sono riuscito a far funzionare su Chrome per computer è stata 24 x 24 px. Purtroppo, questo aspetto non è in linea con Android.
La best practice che possiamo trarre da queste differenze è:
- Utilizza una combinazione di colori coerente per le tue icone, in modo che vengano visualizzate in modo coerente per l'utente.
- Assicurati che funzionino in bianco e nero, poiché alcune piattaforme potrebbero visualizzarle in questo modo.
- Prova le dimensioni e scopri cosa funziona per te. 128 px × 128 px funziona bene su Android, ma la qualità era scarsa su computer.
- Le icone delle azioni non verranno visualizzate.
La specifica Notification sta esplorando un modo per definire più dimensioni delle icone, ma sembra che ci vorrà un po' di tempo prima che venga raggiunto un accordo.
Azioni (risposte incorporate)
Puoi aggiungere una risposta in linea 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 apparirà su Android:
Se fai clic sul pulsante di azione, si apre un campo di immissione del testo:
Puoi personalizzare il segnaposto per il campo di immissione del 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);
In Chrome su Windows, il campo di immissione del testo è sempre visibile senza dover fare clic sul pulsante di azione:
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);
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 i test, è emerso che la direzione era determinata in gran parte dal testo anziché da questo parametro. Secondo le specifiche, questo attributo dovrebbe suggerire al browser come disporre le opzioni, come le azioni, ma non ho notato alcuna differenza.
Probabilmente è meglio definirlo, se possibile, 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 con scrittura da destra a sinistra utilizzata su Chrome su Linux ha il seguente aspetto:
In Firefox (passando il mouse sopra l'elemento) vedrai questo:
Vibrazione
L'opzione vibrate consente di definire un pattern di vibrazione che verrà eseguito quando viene visualizzata una notifica, supponendo che le impostazioni correnti dell'utente consentano le vibrazioni (ovvero che 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 per cui il dispositivo deve vibrare, seguito dal numero di millisecondi per 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 interessa solo i dispositivi che supportano la vibrazione.
Suono
Il parametro sound consente di definire un suono da riprodurre quando viene ricevuta la notifica.
Al momento della stesura di questo documento, 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 comunicare alla piattaforma l'ora in cui si è verificato un evento che ha comportato l'invio della notifica push.
timestamp deve essere il numero di millisecondi trascorsi dalle ore 00:00:00 UTC del 1° gennaio 1970 (ovvero 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 la UX
Il più grande errore di UX che ho visto con le notifiche è la mancanza di specificità nelle informazioni visualizzate da una notifica.
Dovresti considerare il motivo per cui hai inviato il messaggio push in primo luogo e assicurarti che tutte le opzioni di notifica vengano utilizzate per aiutare gli utenti a capire perché stanno leggendo quella notifica.
A dire il vero, è facile vedere esempi e pensare "Non farò mai questo errore". Ma è più facile cadere in questa trappola di quanto si possa pensare.
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.
- Utilizza tutte le informazioni a tua disposizione. Se invii un messaggio push perché qualcuno ha inviato un messaggio a un utente, anziché utilizzare il titolo "Nuovo messaggio" e il corpo "Fai clic qui per leggerlo", utilizza il titolo "Giovanni 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 stesura di questo articolo, esiste una disparità piuttosto grande tra Chrome e Firefox in termini di supporto delle funzionalità per le 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. Procederemmo nel seguente modo:
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 ai nostri utenti.
Per le altre opzioni, segui la stessa procedura descritta sopra, sostituendo 'actions' con il nome del parametro desiderato.
Passaggi successivi
- Panoramica delle notifiche push web
- Come funziona Push
- Iscrizione di un utente
- UX delle autorizzazioni
- Invio di messaggi con le librerie di push sul web
- Protocollo Web Push
- Gestione degli eventi push
- Visualizzazione di una notifica
- Comportamento delle notifiche
- Pattern di notifica comuni
- Domande frequenti sulle notifiche push
- Problemi comuni e segnalazione di bug