Finora, abbiamo esaminato le opzioni che modificano l'aspetto visivo di una notifica. Esistono anche opzioni che alterano il comportamento delle notifiche.
Per impostazione predefinita, le chiamate a showNotification()
con le sole opzioni visive saranno quanto segue
comportamenti:
- Facendo clic sulla notifica non succede nulla.
- Ogni nuova notifica viene visualizzata una dopo l'altra. Il browser non comprime notifiche in qualsiasi modo.
- La piattaforma potrebbe riprodurre un suono o far vibrare il dispositivo dell'utente (a seconda della piattaforma).
- Su alcune piattaforme la notifica scompare dopo un breve periodo di tempo, mentre su altre mostrano la notifica, a meno che l'utente non vi interagisca. Ad esempio, confronta le notifiche su Android e computer.
In questa sezione, vedremo come modificare questi comportamenti predefiniti utilizzando le opzioni. da soli. Sono relativamente facili da implementare e sfruttare.
Notifica clic evento
Quando un utente fa clic su una notifica, il comportamento predefinito prevede che non avvenga nulla. Non o persino chiudere o rimuovere la notifica.
La pratica comune per un clic sulla notifica è che si chiuda ed esegua un'altra logica (ad es. aprire una finestra o effettuare una chiamata API all'applicazione).
A questo scopo, devi aggiungere un listener di eventi 'notificationclick'
al nostro service worker. Questo
verrà chiamato 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
event.notification
. Da qui puoi accedere alle proprietà e ai metodi della notifica. In questo
case, chiami il relativo metodo close()
ed eseguirai altre operazioni.
Azioni
Le azioni ti consentono di creare un altro livello di interazione con gli utenti semplicemente facendo clic sul notifica.
Pulsanti
Nella sezione precedente hai visto come definire i pulsanti di azione durante la chiamata a 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
in noticationclick
per indicare su quale pulsante di azione è stato fatto clic.
event.action
conterrà il valore action
impostato nelle opzioni. Nell'esempio precedente,
I valori di event.action
saranno uno dei seguenti: 'coffee-action'
, 'doughnut-action'
,
'gramophone-action'
o 'atom-action'
.
In questo modo, vengono rilevati i clic sulle notifiche o i clic sulle azioni come quelli indicati di seguito:
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 in linea 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 "gruppi" le notifiche insieme, fornendo una facile
per stabilire come mostrare più notifiche all'utente. È più facile da spiegare
con un esempio.
Visualizziamo una notifica e assegniamo un tag di 'message-group-1'
. Vengono visualizzati i
notifica 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);
Verrà visualizzata la nostra prima notifica.
Mostriamo una seconda notifica con un nuovo tag di 'message-group-2'
, in questo modo:
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
chiude la prima notifica e la sostituisce con la nuova.
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()
è stato chiamato tre volte.
L'opzione tag
è semplicemente un modo per raggruppare i messaggi in modo che tutte le notifiche meno recenti
attualmente visualizzati verranno chiusi se hanno lo stesso tag di una nuova notifica.
Una particolarità dell'utilizzo di tag
è che, quando sostituisce una notifica, lo fa senza alcun suono
o vibrazione.
È qui che entra in gioco l'opzione renotify
.
Invia di nuovo notifica
Questo vale in gran parte per i dispositivi mobili al momento della stesura di questo articolo. Se imposti questa opzione, le notifiche vibrano e riproducono un suono di sistema.
In alcuni casi potrebbe essere opportuno inviare una notifica di sostituzione all'utente anziché inviare una notifica
l'aggiornamento silenzioso. Le applicazioni di chat sono un buon esempio. In questo caso, devi impostare tag
e
renotify
a true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Silenzioso
Questa opzione ti consente di mostrare una nuova notifica, ma impedisce il comportamento predefinito della vibrazione. e accendere il display del dispositivo.
Si tratta della soluzione ideale se le notifiche non richiedono attenzione immediata da parte dell'utente.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Richiede interazione
Chrome su computer mostrerà le notifiche per un determinato periodo di tempo prima di nasconderle. Chrome attivo Android non ha questo comportamento. Le notifiche rimangono visualizzate finché l'utente non vi interagisce.
Per fare in modo che una notifica rimanga visibile finché l'utente non interagisce con essa, aggiungi requireInteraction
. La notifica verrà visualizzata finché l'utente non la chiude o fa clic sulla notifica.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Utilizza questa opzione con considerazione. Mostrare una notifica e costringere l'utente a interrompere la cosa stanno facendo per ignorare la notifica, può essere frustrante.
Nella prossima sezione, esamineremo alcuni dei pattern comuni utilizzati sul web per la gestione delle notifiche e l'esecuzione di azioni come l'apertura di pagine quando si fa clic su una notifica.
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 di notifica
- Pattern di notifica comuni
- Domande frequenti sulle notifiche push
- Problemi comuni e segnalazione di bug