Codelab: creare un client di notifica push

Kate Jeffreys

Kayce Basques

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

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

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

Questo codelab è pensato per aiutarti a imparare facendo pratica e non parla molto di concetti. Consulta Come funzionano le notifiche push? per informazioni sui concetti delle notifiche push.

Il codice del server di questo codelab è già completo. Implementerai il client solo in questo codelab. Per informazioni su come implementare un server di notifiche push, consulta Codelab: creare un server di notifiche push.

Consulta la pagina push-notifications-client-codelab-complete (fonte) per vedere il codice completo.

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

Ottieni una copia modificabile del codice

L'editor di codice che vedi a destra di queste istruzioni sarà denominato UI di Glitch in questo codelab.

1. Fai clic su Remix per modificare per rendere il progetto modificabile.

Se sei in una finestra di navigazione in incognito o ospite di Chrome, potresti avere difficoltà a completare il codelab. Prendi in considerazione l'utilizzo di un profilo con accesso eseguito.

Configura l'autenticazione

Prima di poter attivare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per scoprire il motivo, consulta l'articolo Firmare le richieste del protocollo web push.

1. Nella UI di Glitch, fai clic su Strumenti, quindi su Terminale per aprire il terminale Glitch.
2. Esegui npx web-push generate-vapid-keys in Glitch Terminal. Copia la chiave privata e i valori delle chiavi pubbliche.
3. Nella UI di Glitch, apri .env e aggiorna VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Imposta VAPID_SUBJECT su mailto:[e-mail]. Tutti questi valori devono essere racchiusi tra virgolette doppie. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe essere simile a questo:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Chiudi Glitch Terminal.

I valori delle variabili di ambiente (i contenuti in .env) sono univoci per un singolo progetto Glitch. Se esegui il remix del tuo progetto, i valori in .env non verranno copiati.

1. Apri public/index.js.
2. Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della tua chiave pubblica.

Registra un service worker

Il tuo client avrà bisogno di un service worker per ricevere e visualizzare le notifiche. È preferibile registrare il service worker il prima possibile. Per saperne di più, consulta Ricevere e visualizzare i messaggi push come notifiche.

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

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .

Termine chiave: la scheda che hai appena aperto sarà indicata come scheda dell'app in questo codelab.

1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
2. Fai clic sulla scheda Console. Dovresti vedere il messaggio Service worker was registered. registrato nella console.

Nota: l'istruzione precedente presuppone che tu utilizzi Google Chrome e Chrome DevTools.

Richiedere l'autorizzazione alle notifiche push

Non devi mai richiedere l'autorizzazione per inviare notifiche push al caricamento della pagina. La UI dovrebbe invece chiedere all'utente se vuole ricevere notifiche push. Dopo che hanno confermato esplicitamente (con un clic su un pulsante, ad esempio), puoi avviare il processo formale per ottenere l'autorizzazione alle notifiche push dal browser.

1. Nell'interfaccia utente di Glitch, fai clic su Visualizza sorgente per tornare al tuo codice.
2. 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.');
}

1. Torna alla scheda dell'app e fai clic su Iscriviti per il push. Probabilmente il tuo browser o sistema operativo ti chiederà se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o su qualsiasi frase equivalente utilizzata dal tuo browser/sistema operativo). Nella console dovresti vedere un messaggio che indica se la richiesta è stata accettata o rifiutata.

Se sei in una finestra di navigazione in incognito o in ospite, il browser potrebbe rifiutare automaticamente la richiesta. Tieni d'occhio eventuali UI del browser che indicano che la richiesta è stata bloccata automaticamente.

Iscriviti alle notifiche push

Il processo di abbonamento comporta l'interazione con un servizio web controllato dal fornitore del browser, chiamato servizio push. Una volta ricevute le informazioni di sottoscrizione alle notifiche push, devi inviarle a un server e chiedere al server di archiviarle in un database a lungo termine. Per ulteriori informazioni sul processo di abbonamento, consulta Iscrivere il client alle notifiche push.

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 eseguire il push dei messaggi senza mostrare notifiche visibili all'utente (push silenziosi), ma i browser attualmente non consentono questa funzionalità 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.

Annulla l'iscrizione alle notifiche push

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

1. 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 che gestisca la ricezione e la visualizzazione dei messaggi inviati al client dal tuo server. Per ulteriori dettagli, vedi Ricevere e visualizzare i messaggi inviati 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:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. Torna alla scheda dell'app.
2. Fai clic su Avvisami. Dovresti ricevere una notifica push.
3. 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 a fare clic su Invia notifica a tutti. Dovresti ricevere la stessa notifica push su tutti i browser per cui hai sottoscritto un abbonamento. Consulta la sezione Compatibilità del browser per vedere un elenco di combinazioni di browser/sistema operativo che sono note per il funzionamento o il mancato funzionamento.

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

La chiamata a self.skipWaiting() nel listener install del service worker è importante da capire. Per maggiori informazioni, leggi l'articolo Saltare la fase di attesa. Senza questo parametro, le modifiche apportate al codice che apporti al service worker non avranno effetto immediato. Puoi o meno utilizzare questa funzione sul tuo sito web a seconda delle tue esigenze, ma in entrambi i casi è importante comprenderne l'effetto.

Aprire un URL quando un utente fa clic su una notifica

Probabilmente utilizzerai la notifica nel mondo reale per ravvivare l'interesse degli utenti e invitarli 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:

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

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

Passaggi successivi

• Apri il menu ServiceWorkerRegistration.showNotification() per scoprire tutti i diversi modi in cui puoi personalizzare le notifiche.
• Per una comprensione concettuale più approfondita di come funzionano le notifiche push, consulta Panoramica delle notifiche push.
• Consulta Codelab: creare un server di notifiche push per scoprire come creare un server che gestisca le sottoscrizioni e invii richieste di protocollo web push.
• Prova Generatore di notifiche per provare tutti i modi in cui puoi personalizzare le notifiche.