Finora abbiamo esaminato le opzioni che modificano l'aspetto visivo di una notifica. Esistono anche opzioni che modificano il comportamento delle notifiche.
Per impostazione predefinita, la chiamata a showNotification() solo con opzioni visive avrà i seguenti comportamenti:
- Il clic sulla notifica non comporta alcun effetto.
- Ogni nuova notifica viene visualizzata una dopo l'altra. Il browser non comprime in alcun modo le notifiche.
- La piattaforma potrebbe riprodurre un suono o vibrare il dispositivo dell'utente (a seconda della piattaforma).
- Su alcune piattaforme, la notifica scompare dopo un breve periodo di tempo, mentre in altre viene mostrata la notifica, a meno che l'utente non ci interagisca. Ad esempio, confronta le notifiche su Android e desktop.
In questa sezione vedremo come modificare questi comportamenti predefiniti utilizzando le sole opzioni. Sono relativamente facili da implementare e da sfruttare.
Evento di clic di notifica
Quando un utente fa clic su una notifica, il comportamento predefinito è che non succeda nulla. Non chiude né rimuove la notifica.
In genere, un clic su una notifica si chiude ed esegue altre logiche (ad esempio, aprire una finestra o effettuare chiamate API all'applicazione).
A questo scopo, devi aggiungere un listener di eventi 'notificationclick' al nostro service worker. La chiamata verrà richiamata ogni volta che viene fatto clic su una notifica.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Come puoi vedere in questo esempio, la notifica su cui è stato fatto clic è accessibile come
event.notification. Da qui puoi accedere alle proprietà e ai metodi della notifica. In questo caso, chiami il relativo metodo close() ed esegui operazioni aggiuntive.
Azioni
Le azioni ti consentono di creare un ulteriore livello di interazione con gli utenti semplicemente facendo clic sulla notifica.
Pulsanti
Nella sezione precedente hai visto come definire i pulsanti di azione quando chiami showNotification():
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
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);
Se l'utente fa clic su un pulsante di azione, controlla il valore event.action nell'evento noticationclick
per capire su quale pulsante di azione è stato fatto clic.
event.action conterrà il valore action impostato nelle opzioni. Nell'esempio precedente, i valori event.action sarebbero uno dei seguenti: 'coffee-action', 'doughnut-action', 'gramophone-action' o 'atom-action'.
In questo modo vengono rilevati i clic di notifica o i clic di azione nel seguente modo:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Risposte in linea
Inoltre, nella sezione precedente hai visto come aggiungere una risposta incorporata alla notifica:
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);
event.reply conterrà il valore digitato dall'utente nel campo di immissione:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Tag
L'opzione tag è essenzialmente un ID stringa che "raggruppa" le notifiche, fornendo un modo semplice per determinare in che modo più notifiche vengono mostrate all'utente. È più facile da spiegare
con un esempio.
Visualizziamo una notifica e attribuiamo un tag di 'message-group-1'. La notifica viene visualizzata con questo codice:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
che mostra la prima notifica.
Visualizziamo una seconda notifica con un nuovo tag 'message-group-2', ad esempio:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
Verrà visualizzata una seconda notifica per l'utente.
Ora mostriamo una terza notifica, ma riutilizziamo il primo tag di 'message-group-1'. In questo modo, la prima notifica verrà chiusa e sostituita con la nuova notifica.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Ora abbiamo due notifiche anche se showNotification() ha ricevuto tre chiamate.
L'opzione tag consente semplicemente di raggruppare i messaggi in modo che tutte le notifiche precedenti
visualizzate attualmente vengano chiuse se hanno lo stesso tag di una nuova notifica.
Un aspetto interessante nell'utilizzo di tag è che quando sostituisce una notifica, lo fa senza suoni o vibrazioni.
È qui che entra in gioco l'opzione renotify.
Invia una nuova notifica
Questo vale in gran parte per i dispositivi mobili al momento della scrittura. Se imposti questa opzione, le nuove notifiche vibrano e riproducono un suono di sistema.
In alcuni casi è possibile che tu voglia che una notifica di sostituzione invii una notifica all'utente anziché eseguire l'aggiornamento in silenzio. Le applicazioni di chat sono un buon esempio. In questo caso, devi impostare tag e
renotify su true.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Notifiche silenziose
Questa opzione ti consente di mostrare una nuova notifica, ma impedisce il comportamento predefinito di vibrazione, suoni e attivazione del display del dispositivo.
È la scelta ideale se le notifiche non richiedono la tua attenzione immediata da parte dell'utente.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Richiede interazione
Chrome su computer mostra le notifiche per un determinato periodo di tempo prima di nasconderle. Chrome su Android non ha questo comportamento. Le notifiche vengono visualizzate finché l'utente non interagisce con esse.
Per forzare una notifica a rimanere visibile finché l'utente non interagisce con essa, aggiungi l'opzione requireInteraction. La notifica viene mostrata finché l'utente non la ignora o fa clic sulla notifica.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Utilizza questa opzione con attenzione. Mostrare una notifica e costringere l'utente a interrompere ciò che sta facendo per ignorarla può essere frustrante.
Nella prossima sezione, esamineremo alcuni dei pattern comuni utilizzati sul web per gestire le notifiche e compiere azioni come l'apertura di pagine quando si fa clic su una notifica.
Passaggi successivi
- Panoramica delle notifiche push web
- Come funziona Push
- Iscrizione di un utente
- UX delle autorizzazioni
- Invio di messaggi con librerie web push
- Protocollo web push
- Gestione degli eventi push
- Visualizzazione di una notifica
- Comportamento di notifica
- Pattern di notifica comuni
- Domande frequenti sulle notifiche push
- Problemi comuni e segnalazione di bug