Codelab: creare un client di notifica push

Kate Jeffreys

Kayce Basques

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

Questo codelab ti mostra, passo passo, come creare un client per le notifiche push. Alla fine del codelab avrai un cliente 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 su come imparare con la pratica e non parla molto di concetti. Consulta Come funzionano le notifiche push? per scoprire di più sui concetti relativi alle notifiche push.

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

Dai un'occhiata a push-notifications-client-codelab-complete (fonte) per visualizzare 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

Imposta

Ottieni una copia modificabile del codice

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

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

Se stai utilizzando una finestra di navigazione in incognito o ospite di Chrome, potresti avere problemi a completare il codelab. Prendi in considerazione l'utilizzo di un profilo a cui è stato eseguito l'accesso.

Configura l'autenticazione

Prima di poter attivare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per ulteriori informazioni, consulta Firmare le richieste di protocollo push web.

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 nel terminale Glitch. Copia la chiave privata e le coppie chiave-valore pubbliche.
3. Nell'interfaccia utente 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. 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 il terminale Glitch.

I valori delle variabili di ambiente (gli elementi in .env) sono univoci per un singolo progetto Glitch. Se fai il remix del 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. È meglio registrare il service worker il prima possibile. Per ulteriori informazioni, consulta Ricevere e visualizzare i messaggi inviati 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 verrà chiamata scheda dell'app in questo codelab.

1. Premi "Ctrl+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 stia utilizzando Google Chrome e Chrome DevTools.

Richiedi autorizzazione alle notifiche push

Non devi mai richiedere l'autorizzazione per inviare notifiche push al caricamento pagina. L'UI dovrebbe invece chiedere all'utente se vuole ricevere le notifiche push. Dopo la conferma esplicita (ad esempio con un clic su un pulsante), puoi avviare la procedura formale per ottenere l'autorizzazione alle notifiche push dal browser.

1. Nell'interfaccia utente di Glitch, fai clic su Visualizza sorgente per tornare al 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 Abbonati per push. Il tuo browser o sistema operativo ti chiederà probabilmente se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o qualsiasi altra frase equivalente utilizzata dal browser o dal sistema operativo). Nella console dovresti vedere un messaggio che indica se la richiesta è stata accettata o rifiutata.

Se è attiva la finestra di navigazione in incognito o 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 prevede l'interazione con un servizio web controllato dal fornitore del browser chiamato servizio push. Una volta ricevute le informazioni sull'abbonamento alle notifiche push, devi inviarle a un server e fare in modo che il server le archivi in un database a lungo termine. Consulta Iscrivere il client alle notifiche push per ulteriori informazioni sul processo di abbonamento.

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 visualizzare notifiche visibili all'utente (push silenziosi), ma attualmente i browser 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, 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.

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 prima, hai bisogno di un service worker che gestisca la ricezione e la visualizzazione dei messaggi di cui è stato eseguito il push al client dal tuo server. Per ulteriori dettagli, consulta 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 altri dispositivi), seguendo il flusso di lavoro dell'abbonamento e quindi fai clic su Invia notifiche a tutti. Dovresti ricevere la stessa notifica push su tutti i browser per cui hai effettuato l'iscrizione. Fai riferimento a Compatibilità del browser per visualizzare un elenco di combinazioni di browser/sistema operativo di cui è noto il funzionamento o il funzionamento.

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

È importante comprendere la chiamata a self.skipWaiting() nel listener install del service worker. Consulta Saltare la fase di attesa per ulteriori informazioni. In caso contrario, le modifiche al codice apportate al service worker non avranno effetto immediato. Puoi o meno utilizzare questa funzionalità sul tuo sito web a seconda delle tue esigenze, ma in ogni caso è importante comprenderne l'effetto.

Aprire un URL quando un utente fa clic su una notifica

Nel mondo reale, probabilmente utilizzerai la notifica 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:

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

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

• Visita la pagina ServiceWorkerRegistration.showNotification() per scoprire tutti i diversi modi per personalizzare le notifiche.
• Leggi Panoramica delle notifiche push per una comprensione concettuale più approfondita di come funzionano le notifiche push.
• Consulta Codelab: Creare un server di notifiche push per scoprire come creare un server che gestisca gli abbonamenti e invii le richieste di protocollo push web.
• Prova Notification Builder per sperimentare tutti i modi in cui puoi personalizzare le notifiche.