Codelab: creare un client di notifica push

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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 sull'aiutarti ad apprendere facendo e non parlano molto dei concetti. Paga Come funzionano le notifiche push? per saperne di più sui concetti delle notifiche push.

Il codice server di questo codelab è già completo. Sarai per implementare il client in questo codelab. Per scoprire come implementare una server di notifica push, consulta Codelab: Creare una notifica push o server web.

Consulta 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 si chiama l'UI di Glitch in questo codelab.

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

Configura l'autenticazione

Per far funzionare le notifiche push, devi prima configurare il tuo server e il tuo client con chiavi di autenticazione. Consulta Firmare le richieste di protocollo push web. per scoprire perché.

  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 Da VAPID_SUBJECT a mailto:test@test.test. Tutti questi valori devono essere aggregati tra virgolette. Dopo aver apportato gli aggiornamenti, il file .env dovrebbe avere un aspetto in modo simile a questo:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Chiudi il terminale Glitch.
di Gemini Advanced.
  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 notifiche. È meglio registrare il service worker il prima possibile. Vedi Ricevere e visualizzare i messaggi inviati come push notifiche per saperne di più.

  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 Schermo intero schermo intero.
di Gemini Advanced.
  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. ha eseguito l'accesso alla console.
di Gemini Advanced.

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 aver confermato esplicitamente (ad esempio facendo clic su un pulsante), 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 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 un sistema operativo ti chiederà probabilmente se vuoi consentire al sito web inviarti notifiche push. Fai clic su Consenti (o una frase equivalente utilizzati dal tuo browser/sistema operativo). Nella console, dovresti vedere un messaggio che indica se la richiesta è stata accettata o rifiutata.
di Gemini Advanced.

Iscriviti alle notifiche push

La procedura di abbonamento prevede l'interazione con un servizio web controllato dal fornitore di browser chiamato servizio push. Una volta ottenuto le informazioni sull'iscrizione alle notifiche push necessarie per inviarle a un server e fare in modo che il server lo archivi in un database a lungo termine. Fai riferimento a Iscriversi al client per le notifiche push. per ulteriori informazioni sulla procedura 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 sarà possibile ai messaggi push senza mostrare notifiche visibili agli utenti (push silenziosi), ma i browser al momento 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 tuo server e il servizio push.

Annulla l'iscrizione alle notifiche push

Quando un utente si è iscritto alle notifiche push, l'interfaccia utente deve offrire un modo per annullare l'iscrizione nel caso in cui l'utente cambi idea e non desidera 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 per gestire ricezione e visualizzazione di messaggi inviati al client dal tuo server. Vedi Ricevere e visualizzare i messaggi inviati come push notifiche per ulteriori dettagli.

  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 poi facendo clic su Invia notifiche per 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 browser/OS combinazioni di cui è noto il funzionamento o che non funzionano.

Puoi personalizzare la notifica in molti modi. Vedi i parametri di ServiceWorkerRegistration.showNotification() per scoprire di più.

Aprire un URL quando un utente fa clic su una notifica

Nel mondo reale, probabilmente userai la notifica come mezzo 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 file 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 caricarsi https://web.dev.

Passaggi successivi