Le opzioni di notifica sono suddivise in due sezioni, una che tratta gli aspetti visivi (questo e una che spiega gli aspetti comportamentali delle notifiche (la sezione successiva).
Puoi sperimentare varie opzioni di notifica in vari browser su varie piattaforme con la versione di Peter Beverloo Generatore di notifiche.
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 titolo e corpo
Ecco l'aspetto di una notifica senza titolo e opzioni in Chrome su Windows:
Come puoi vedere, il nome del browser viene utilizzato come titolo e come "Nuova notifica" il segnaposto è utilizzato come corpo della notifica.
Se sul dispositivo è installata un'applicazione web progressiva, verrà utilizzato il nome dell'app web del 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);
riceviamo questa notifica in Chrome su Linux:
In Firefox su Linux l'aspetto sarebbe il seguente:
Questo è l'aspetto della 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, causando per espandere la notifica:
In Firefox su Windows, le notifiche hanno il seguente aspetto:
Come puoi vedere, la stessa notifica può avere un aspetto diverso a seconda del browser. Potrebbe anche avere un aspetto nello stesso browser su piattaforme diverse.
Chrome e Firefox utilizzano le notifiche di sistema e il Centro notifiche sulle piattaforme in cui questi sono disponibili.
Ad esempio, le notifiche di sistema su macOS non supportano immagini e azioni (pulsanti e pulsanti risposte).
Chrome offre anche notifiche personalizzate per tutte le piattaforme desktop. Puoi abilitarlo impostando
Flag chrome://flags/#enable-system-notifications allo 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 all'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 per la dimensione dell'immagine da utilizzare per un'icona.
Android sembra volere un'immagine da 64 dp (ovvero multipli di 64 px per le proporzioni pixel del dispositivo).
Supponendo che le proporzioni pixel più elevate per un dispositivo siano pari a 3, un'icona di dimensioni pari o superiori a 192 px è un una scommessa sicura.
Badge
badge è una piccola icona monocromatica utilizzata per mostrare maggiori informazioni al
sulla provenienza della notifica:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Al momento della stesura del badge, il badge è utilizzato solo in Chrome su Android.
Su altri browser (o su Chrome senza badge), è presente un'icona del browser.
Come per l'opzione icon, non esistono linee guida reali sulle dimensioni da utilizzare.
Analizzare le linee guida di Android la dimensione consigliata è 24 px moltiplicata per le proporzioni pixel del dispositivo.
Un'immagine di almeno 72 px dovrebbe essere buona (supponendo che le proporzioni pixel del dispositivo massime siano pari a 3).
Immagine
L'opzione image può essere utilizzata per mostrare all'utente un'immagine più grande. Questo è in particolare
è utile 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:
In Chrome su Android, il ritaglio e le proporzioni sono diversi:
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 il 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 guida è per una larghezza di 450 dp.
Utilizzando questa linea guida, un'immagine di larghezza pari o superiore a 1350 px sarebbe una buona soluzione.
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 title, action (che è essenzialmente un ID), icon e
un type. Il titolo e l'icona sono quelli che puoi vedere nella notifica. L'ID viene utilizzato durante il rilevamento
che gli utenti hanno fatto clic sul pulsante di azione (per ulteriori informazioni, vedi la sezione successiva). Il tipo
può essere omesso perché 'button' è il valore predefinito.
Al momento della stesura di questo documento, soltanto le azioni supportate per Chrome e Opera per Android.
Nell'esempio precedente sono state definite quattro azioni per indicare che puoi definire più azioni
. 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 hanno i propri colori (vedi il cerchio rosa):
Su Android 6 e versioni precedenti, le icone vengono colorate in base alla combinazione di colori del sistema:
Su Android 7 e versioni successive, le icone delle azioni non vengono mostrate.
Ci auguriamo che Chrome cambi il suo comportamento sul computer per adeguarlo ad Android (ovvero applichi il
una combinazione di colori appropriata per adattare le icone all'aspetto e al design del sistema). Nel frattempo,
può corrispondere al colore del testo di Chrome impostando il colore #333333 per le icone.
È bene ricordare inoltre che le icone sono nitide su Android ma non sui computer.
La dimensione migliore che potessi ottenere per lavorare su Chrome desktop era 24 x 24 px. Purtroppo sembra fuori luogo su Android.
La best practice che possiamo ricavare da queste differenze:
- Utilizza una combinazione di colori coerente per le icone in modo che almeno tutte le icone siano coerenti. mostrati all'utente.
- Assicurati che funzionino in monocromatico, perché alcune piattaforme potrebbero mostrarli in questo modo.
- Testa la taglia e scopri quale funziona meglio per te. La risoluzione 128 px × 128 px funziona bene su Android, ma il risultato è scarso di qualità sui computer.
- Le icone delle azioni potrebbero non essere visualizzate affatto.
La specifica Notifica esplora un modo per definire più dimensioni delle icone, ma sembra che prima che venga concordato qualsiasi cosa.
Azioni (risposte in linea)
Puoi aggiungere una risposta in linea alla notifica definendo un'azione di 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 testo:
Puoi personalizzare il segnaposto per il campo di immissione di 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 sull'azione Pulsante:
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 mostrare il testo,
da destra a sinistra o da sinistra a destra.
Durante i test, sembrava che la direzione fosse in gran parte determinata dal testo, piuttosto che . In base alle specifiche, ha lo scopo di suggerire al browser le opzioni di layout come le azioni, ma non ho notato alcuna differenza.
Probabilmente è meglio stabilire se è possibile, altrimenti il browser dovrebbe fare la cosa giusta secondo del testo fornito.
Il parametro deve essere impostato su auto, ltr o rtl.
Una lingua da destra a sinistra utilizzata in Chrome su Linux ha il seguente aspetto:
In Firefox (al passaggio del mouse sopra) viene visualizzato il seguente messaggio:
Vibrazione
L'opzione vibrazione consente di definire una sequenza di vibrazione da eseguire quando viene inviata una notifica supponendo che le impostazioni correnti dell'utente consentano la vibrazione (il dispositivo, ad esempio, non è in modalità silenziosa).
Il formato dell'opzione della vibrazione deve essere un array di numeri che descrive il numero di millisecondi in cui il dispositivo dovrebbe vibrare, seguito dal numero di millisecondi in cui il dispositivo senza vibrazione.
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 solo i dispositivi che supportano la vibrazione.
Suono
Il parametro audio consente di definire un suono da riprodurre alla ricezione della 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 indicare alla piattaforma l'ora in cui si è verificato un evento che ha generato il push notifica in fase di invio.
timestamp deve corrispondere al numero di millisecondi a partire dalle ore 00:00:00 UTC, ovvero il 1° gennaio 1970.
(l'epoca 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'esperienza utente
Il più grande errore UX che ho riscontrato con le notifiche è la mancanza di specificità nelle informazioni visualizzato da una notifica.
Innanzitutto, considera il motivo per cui hai inviato il messaggio push e assicurati che le opzioni di notifica vengono 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 questa trappola di quanto si possa pensare.
Ecco alcuni inconvenienti comuni da evitare:
- Non inserire il tuo sito web nel titolo o nel corpo. I browser includono il tuo dominio nel quindi non duplicarla.
- 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 di "Fai clic qui per leggerlo". utilizza il titolo "Mario ha appena inviato un nuovo messaggio" e imposta il corpo della notifica su parte del messaggio.
Browser e rilevamento delle funzionalità
Al momento della stesura di questo documento, c'è una grande disparità tra Chrome e Firefox in termini di: funzionalità per le notifiche.
Fortunatamente, puoi rilevare il supporto delle funzionalità di notifica controllando il window.Notification
un prototipo di modello.
Supponiamo che vogliamo sapere se una notifica supporta i pulsanti di azione, procedi 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.
Con le altre opzioni, ripeti la procedura precedente, sostituendo 'actions' con il codice
del parametro.
Passaggi successivi
- Panoramica delle notifiche push web
- Come funziona il push
- Iscrizione di un utente
- Esperienza utente con autorizzazione
- Invio di messaggi con le librerie 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