Questa pagina è stata tradotta dall'API Cloud Translation.

Utilizzo di un service worker per gestire le notifiche

Kate Jeffreys

In questo codelab, utilizzerai un service worker per gestire le notifiche. Le istruzioni qui riportate presuppongono che tu abbia già familiarità con service worker e nozioni di base per richiedere l'autorizzazione alle notifiche e inviare notifiche. Se hai bisogno di un ripasso sulle notifiche, consulta Iniziare a utilizzare l'API Notifications codelab. Per scoprire di più sui service worker, consulta Introduzione ai service worker di Matt Gaunt.

Remixa l'app di esempio e visualizzala in una nuova scheda

Le notifiche vengono bloccate automaticamente dall'app Glitch incorporata, quindi non potrai visualizzare l'anteprima dell'app in questa pagina. Ecco invece cosa fare:

Fai clic su Remixa per modificare per rendere modificabile il progetto.
Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero .

Il Glitch dovrebbe aprirsi in una nuova scheda di Chrome.

Mentre lavori in questo codelab, apporta modifiche al codice nel Glitch incorporato in questa pagina. Aggiorna la nuova scheda con la tua app pubblicata per vedere le modifiche.

Acquisisci familiarità con l'app di esempio e il codice iniziale

Inizia guardando l'app pubblicata nella nuova scheda di Chrome:

Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
Fai clic sulla scheda Console.
Assicurati che l'opzione Informazioni nel menu a discesa Livelli sia selezionata. accanto alla casella Filtro.
Nella console DevTools dell'app pubblicata, dovresti vedere un messaggio della console:

TODO: Implement getRegistration().

Questo è un messaggio di uno stub di funzione che implementerai in questo codelab.

Ora diamo un'occhiata al codice dell'app di esempio nel file Glitch incorporato in questa pagina.

Nel glitch incorporato, dai un'occhiata a public/index.js:
- Esistono quattro stub per le funzioni da implementare: registerServiceWorker, getRegistration, unRegisterServiceWorker e sendNotification.
- La funzione requestPermission richiede l'autorizzazione dell'utente per inviare notifiche. Se hai seguito il codelab dell'API Notifications, noterai che viene utilizzata la sua funzione requestPermission. L'unica differenza è che ora aggiorna anche l'interfaccia utente dopo aver risolto la richiesta di autorizzazione.
- La funzione updateUI aggiorna tutti i pulsanti e i messaggi dell'app.
- La funzione initializePage esegue il rilevamento delle funzionalità per i service worker nel browser e aggiorna l'interfaccia utente dell'app.
- Lo script attende il caricamento della pagina, quindi la inizializza.
Apri public/service-worker.js nel glitch incorporato.

Come suggerisce il nome, dovrai aggiungere all'app del codice per registrare questo file come Service worker.

Sebbene il file non sia ancora utilizzato dall'app, contiene un codice di avvio che stamperà un messaggio sulla console quando il service worker viene attivato.

Aggiungerai il codice a public/service-worker.js per gestire le notifiche quando il service worker le riceve.

Registra il service worker

In questo passaggio scriverai il codice che viene eseguito quando l'utente fa clic su Registra service worker nell'interfaccia utente dell'app. Questo codice registrerà public/service-worker.js come service worker.

Apri public/index.js nell'editor Glitch incorporato. Sostituisci la funzione registerServiceWorker con il seguente codice:
```
// Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}
```
Tieni presente che registerServiceWorker utilizza la dichiarazione async function per rendere più comoda la gestione delle promesse. In questo modo puoi await il valore risolto di un Promise. Ad esempio, la funzione riportata sopra attende il risultato della registrazione di un service worker prima di aggiornare la UI. Per ulteriori informazioni, vedi await su MDN.
Ora che l'utente può registrare un service worker, puoi ottenere un riferimento all'oggetto di registrazione del service worker. In public/index.js, sostituisci la funzione getRegistration con il seguente codice:
```
// Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}
```
La funzione riportata sopra utilizza il parametro API Service Worker per ottenere la registrazione attuale del Service worker, se esistente. Rende un po' più pratico ottenere un riferimento alla registrazione del service worker.

Per completare la funzionalità di registrazione del service worker, aggiungi il codice per annullare la registrazione del service worker. Sostituisci la funzione unRegisterServiceWorker con il seguente codice:

// Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

Ricarica la pagina nella scheda in cui stai visualizzando l'app pubblicata. I pulsanti Registra service worker e Annulla registrazione service worker ora dovrebbero funzionare.

Invia notifiche al service worker

In questo passaggio, scriverai il codice che verrà eseguito quando l'utente fa clic su Invia una notifica nell'interfaccia utente dell'app. Questo codice creerà una notifica, controllerà che un service worker sia registrato e quindi invierà la notifica al service worker utilizzando il suo metodo postMessage.

Nell'editor Glitch incorporato, apri public/index.js e sostituisci la funzione sendNotification con il seguente codice:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Ecco cosa sta facendo il codice:

sendNotification è una funzione asincrona, quindi puoi utilizzare await per ottenere un riferimento alla registrazione del service worker.
Il metodo postMessage del service worker invia i dati dall'app al service worker. Per ulteriori informazioni, consulta la documentazione MDN su postMessage.
Il codice verifica la presenza della proprietà navigator.serviceWorker.controller prima di tentare di accedere alla funzione postMessage. Il valore navigator.serviceWorker.controller sarà null se non ci sono service worker attivi o se la pagina è stata aggiornata in modo forzato (Shift+Ricarica). Per ulteriori informazioni, consulta la documentazione relativa ai controller ServiceWorker su MDN.

Gestire le notifiche nel service worker

In questo passaggio, scriverai nel Service worker il codice che gestirà i messaggi pubblicati e le notifiche per l'utente.

Apri public/service-worker.js nell'editor Glitch incorporato. Aggiungi il seguente codice alla fine del file:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Ecco una breve spiegazione:

self è un riferimento al service worker stesso.
Mentre ora il service worker gestisce la visualizzazione delle notifiche, l'interfaccia utente principale dell'app rimane responsabile di ottenere l'autorizzazione alle notifiche dall'utente. Se l'autorizzazione non viene concessa, la promessa restituita da showNotification viene rifiutata. Il codice riportato sopra utilizza un blocco catch per evitare un errore di rifiuto Promise non rilevato e gestire questo errore in modo un po' più controllato.

Se non riesci ad andare avanti, visita la pagina glitch.com/edit/#!/codelab-notifications-service-worker-completed per visualizzare il codice completato.

Vai al codelab successivo di questa serie: Creare un server per le notifiche push.