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 è incentrato sull'apprendimento pratico e non approfondisce molto i concetti. Leggi Come funziona il push per scoprire i 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

Questo codelab è compatibile con le seguenti combinazioni di sistemi operativi e browser:

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

Questo codelab non funziona con i seguenti sistemi operativi (o combinazioni di sistema operativo e browser):

  • macOS: Brave, Edge, Safari
  • iOS

Configurazione

Configura l'autenticazione

Prima di poter utilizzare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per scoprire il motivo, consulta Firma le richieste del protocollo web push. 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"
  1. Apri public/index.js.
  2. Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della tua chiave pubblica.

Registra un service worker

Il client ha bisogno di un service worker per ricevere e visualizzare le notifiche. È consigliabile registrare il service worker il prima possibile. Per ulteriori informazioni, consulta Ricevi e visualizza i messaggi push come notifiche.

  1. Sostituisci il commento // TODO add startup logic here con il seguente codice:

    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);

  2. In Chrome, apri la console DevTools.

  3. Dovresti visualizzare il messaggio Service worker was registered. registrato nella console.

Richiedi l'autorizzazione alle notifiche push

Non dovresti mai richiedere l'autorizzazione per inviare notifiche push al caricamento della pagina. La tua UI dovrebbe invece chiedere all'utente se vuole ricevere notifiche push. Una volta che l'utente ha confermato esplicitamente (ad esempio con un clic su un pulsante), puoi avviare la procedura formale per ottenere l'autorizzazione alle notifiche push dal browser.

  1. In public/index.js sostituisci il commento // TODO in subscribeButtonHandler() con il seguente codice:

    // 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.');
}

  2. Torna alla scheda dell'app e fai clic su Iscriviti alle notifiche push. Il browser o il sistema operativo ti chiederà se vuoi consentire al sito web di inviarti notifiche push.

  3. Seleziona Consenti (o la frase equivalente utilizzata dal browser o dal sistema operativo). Nella console dovresti visualizzare un messaggio che indica se la richiesta è stata accettata o rifiutata.

Iscriviti alle notifiche push

Il processo di iscrizione prevede l'interazione con un servizio web controllato dal fornitore del browser, chiamato servizio push. Una volta ottenute le informazioni sull'abbonamento alle notifiche push, devi inviarle a un server e fare in modo che il server le memorizzi in un database a lungo termine.

  1. 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 push senza mostrare notifiche visibili all'utente (push silenziosi), ma i browser non consentono questa funzionalità per 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 tuo server e il servizio push.

Annulla 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:
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, hai bisogno di un service worker per gestire la ricezione e la visualizzazione dei messaggi inviati al client dal tuo server. Per ulteriori dettagli, consulta Ricevi e visualizza i messaggi push come notifiche.

  1. Apri public/service-worker.js e sostituisci il commento // TODO nel gestore di eventi push del service worker con il seguente codice:

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Torna alla scheda dell'app.

  3. Fai clic su Avvisami. Dovresti ricevere una notifica push.

  4. Apri l'URL della scheda dell'app in altri browser supportati. Segui il workflow di iscrizione e fai clic su Invia notifica a tutti. Dovresti ricevere la stessa notifica push in ciascuno.

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

Apri un URL quando un utente fa clic su una notifica

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

  1. Sostituisci il commento // TODO nel gestore di eventi notificationclick del service worker con il seguente codice:

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. Torna alla scheda dell'app, inviati un'altra notifica e fai clic sulla notifica. Il browser dovrebbe aprire una nuova scheda e caricare https://web.dev.

Passaggi successivi