Codelab: creare un client di notifica push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Questo codelab mostra passo passo come creare un client di notifiche push. Al termine del codelab avrai un client che:

  • Iscrive l'utente alle notifiche push.
  • Riceve messaggi push e li visualizza come notifiche.
  • Annulla l'iscrizione dell'utente alle notifiche push.

Questo codelab si concentra sull'apprendimento pratico e non approfondisce molto i concetti. Consulta l'articolo Come funzionano le notifiche push? per scoprire di più sui concetti relativi alle notifiche push.

Il codice del server di questo codelab è già completo. In questo codelab implementerai solo il client. Per scoprire come implementare un server di notifiche push, consulta Codelab: crea un server di notifiche push.

Compatibilità del browser

È noto che questo codelab funziona con le seguenti combinazioni di sistema operativo e browser:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

È noto che questo codelab non funziona con i seguenti sistemi operativi (o combinazioni di sistema operativo e browser):

  • macOS: Brave, Edge, Safari
  • iOS

Configurazione

Ottenere una copia modificabile del codice

  • Fai clic su Remixa per modificare per rendere il progetto modificabile.

Configura l'autenticazione

Prima di poter ricevere le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Consulta la sezione Firma le richieste del protocollo web push per scoprire il motivo. In genere, i secret vengono archiviati in un file .env, simile a questo.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  • Apri public/index.js.
  • Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della tua chiave pubblica.

Registrare un service worker

Alla fine, il tuo cliente avrà bisogno di un service worker per ricevere e visualizzare le notifiche. È consigliabile registrare il service worker il prima possibile. Per maggiori dettagli, consulta Ricevere e visualizzare i messaggi push come notifiche.

  • Sostituisci il commento // TODO add startup logic here con il seguente codice:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  • Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools.
  • Fai clic sulla scheda Console. Dovresti vedere il messaggio Service worker was registered. registrato nella console.

Richiedere l'autorizzazione per le notifiche push

Non devi mai richiedere l'autorizzazione per inviare notifiche push durante il caricamento della pagina. Al contrario, la tua UI deve chiedere all'utente se vuole ricevere notifiche push. Una volta che l'utente conferma esplicitamente (ad esempio con un clic su un pulsante), puoi avviare la procedura formale per ottenere l'autorizzazione alle notifiche push dal browser.

  • In public/index.js sostituisci il commento // TODO in subscribeButtonHandler() con il seguente codice:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  • Torna alla scheda dell'app e fai clic su Iscriviti alle notifiche push. Il browser o il sistema operativo probabilmente ti chiederà se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o su una frase equivalente utilizzata dal tuo browser/sistema operativo). Nella console dovrebbe essere visualizzato un messaggio che indica se la richiesta è stata accettata o rifiutata.

Iscriviti alle notifiche push

La procedura di abbonamento prevede l'interazione con un servizio web controllato dal fornitore del browser, chiamato servizio push. Una volta ottenute le informazioni sull'iscrizione alle notifiche push, devi inviarle a un server e farle archiviare a lungo termine in un database. Consulta la sezione Iscrivere il cliente alle notifiche push per maggiori dettagli sulla procedura di iscrizione.

  • Aggiungi il seguente codice evidenziato a subscribeButtonHandler():
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

L'opzione userVisibleOnly deve essere true. Un giorno potrebbe essere possibile inviare messaggi senza mostrare notifiche visibili agli utenti (notifiche push silenziose), ma attualmente i browser non lo consentono a causa di problemi di privacy.

Il valore applicationServerKey si basa su una funzione di utilità che converte una stringa Base64 in un Uint8Array. Questo valore viene utilizzato per l'autenticazione tra il server e il servizio push.

Annullare l'iscrizione alle notifiche push

Dopo che un utente si è iscritto alle notifiche push, la tua UI deve fornire un modo per annullare l'iscrizione nel caso in cui l'utente cambi idea e non voglia più ricevere notifiche push.

  • Sostituisci il commento // TODO in unsubscribeButtonHandler() con il seguente codice:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Ricevere un messaggio push e visualizzarlo come notifica

Come accennato in precedenza, è necessario un service worker per gestire la ricezione e la visualizzazione dei messaggi push inviati al client dal server. Per ulteriori dettagli, consulta Ricevere e visualizzare i messaggi push come notifiche.

  • Apri public/service-worker.js e sostituisci il commento // TODO nel gestore di eventi push del service worker con il seguente codice:
// TODO
let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  • Torna alla scheda dell'app.
  • Fai clic su Avvisami. Dovresti ricevere una notifica push.
  • Prova ad aprire l'URL della scheda dell'app su altri browser (o anche su altri dispositivi), a seguire il flusso di lavoro dell'abbonamento e poi a fare clic su Notifica a tutti. Dovresti ricevere la stessa notifica push su tutti i browser a cui hai effettuato l'iscrizione. Consulta la sezione Compatibilità del browser per visualizzare un elenco di combinazioni di browser/sistema operativo che funzionano o non funzionano.

Puoi personalizzare la notifica in molti modi. Per saperne di più, consulta i parametri di ServiceWorkerRegistration.showNotification().

Aprire un URL quando un utente fa clic su una notifica

Nel mondo reale, probabilmente utilizzerai la notifica come modo per coinvolgere nuovamente l'utente e invitarlo a visitare il tuo sito. Per farlo, devi configurare un po' di più il service worker.

  • Sostituisci il commento // TODO nel gestore eventi notificationclick del service worker con il seguente codice:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  • Torna alla scheda dell'app, inviati un'altra notifica e poi fai clic sulla notifica. Il browser dovrebbe aprire una nuova scheda e caricare https://web.dev.

Passaggi successivi