Codelab: creare un client di notifica push

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

  • L'utente si iscrive alle notifiche push.
  • Riceve i messaggi push e li mostra come notifiche.
  • Annullamento dell'iscrizione dell'utente alle notifiche push.

Questo codelab è incentrato sull'apprendimento pratico e non discute molto i concetti. Consulta l'articolo Come funzionano le notifiche push? per saperne di più sui concetti di 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 il codelab: Crea un server di notifiche push.

Dai un'occhiata a push-notifications-client-codelab-complete (fonte) per visualizzare il codice completo.

Compatibilità del browser

Questo codelab è noto per funzionare 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

L'editor di codice che vedi a destra di queste istruzioni verrà chiamato interfaccia utente Glitch per tutto il codelab.

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

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 Firmare le richieste del protocollo web push.

  1. Nell'interfaccia utente di Glitch, fai clic su Strumenti e poi su Terminale per aprire il terminale Glitch.
  2. Nel terminale di Glitch, esegui npx web-push generate-vapid-keys. Copia i valori della chiave privata e della chiave pubblica.
  3. Nell'interfaccia utente di Glitch, apri .env e aggiorna VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Imposta VAPID_SUBJECT su mailto:test@test.test. Tutti questi valori devono essere racchiusi tra virgolette doppie. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe avere un aspetto simile al seguente:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Chiudi Glitch Terminal.
  1. Apri public/index.js.
  2. Sostituisci VAPID_PUBLIC_KEY_VALUE_HERE con il valore della chiave pubblica.

Registra un service worker

Il tuo cliente avrà bisogno di un servizio worker per ricevere e visualizzare le notifiche. È preferibile registrare il service worker il prima possibile. Per ulteriori informazioni, consulta la sezione 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 premi A schermo intero schermo intero.
  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.

Richiedi autorizzazione alle notifiche push

Non devi mai richiedere l'autorizzazione per inviare notifiche push al caricamento della pagina. L'interfaccia utente dovrebbe invece chiedere all'utente se vuole ricevere notifiche push. Una volta confermata esplicitamente (ad esempio con un clic su un pulsante), puoi avviare la procedura formale per ottenere l'autorizzazione per le notifiche push dal browser.

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

Iscriverti alle notifiche push

La procedura 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. Per ulteriori informazioni sulla procedura di sottoscrizione, consulta la sezione Registrare il cliente 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 inviare messaggi push senza visualizzare notifiche visibili all'utente (push silenziosi), ma al momento i browser non consentono questa funzionalità per motivi 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.

  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, hai bisogno di un worker di servizio per gestire 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 della tua app su altri browser (o anche su altri dispositivi), segui il flusso di lavoro dell'iscrizione e poi fai clic su Avvisa tutti. Dovresti ricevere la stessa notifica push su tutti i browser a 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().

Aprire un URL quando un utente fa clic su una notifica

Nella vita 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 nell'handler di eventi notificationclick del servizio 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