In questo codelab utilizzerai un worker di servizio per gestire le notifiche. Le istruzioni riportate di seguito presuppongono che tu abbia già dimestichezza con i service worker e le nozioni di base per richiedere l'autorizzazione di notifica e inviare notifiche. Se hai bisogno di un ripasso sulle notifiche, consulta il codelab Iniziare a utilizzare l'API Notifications. Per scoprire di più sui service worker, consulta l'articolo di Matt Gaunt Introduzione ai service worker.
Remixa l'app di esempio e visualizzala in una nuova scheda
Le notifiche vengono bloccate automaticamente dall'app Glitch incorporata, pertanto non potrai visualizzare l'anteprima dell'app in questa pagina. Ecco cosa fare:
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero .
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 di avvio
Per iniziare, guarda l'app in tempo reale nella nuova scheda di Chrome:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
Fai clic sulla scheda Console.
Assicurati che l'opzione Informazioni sia selezionata nel menu a discesa Livelli accanto alla casella Filtro.
Nella console DevTools per l'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
esendNotification
.La funzione
requestPermission
richiede all'utente l'autorizzazione per inviare notifiche. Se hai eseguito il codelab dell'API Notifications, noterai che viene utilizzata la sua funzionerequestPermission
. L'unica differenza è che ora aggiorna anche l'interfaccia utente dopo la risoluzione della 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 e poi la inizializza.
In Glitch incorporato, apri
public/service-worker.js
.Come suggerisce il nome, dovrai aggiungere codice all'app per registrare questo file come service worker.
Anche se il file non è ancora in uso dall'app, contiene del codice iniziale che stampa un messaggio nella console quando il service worker viene attivato.
Aggiungerai del 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 funzioneregisterServiceWorker
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 dichiarazioneasync function
per rendere più comoda la gestione delle promesse. In questo modo puoiawait
il valore risolto di unPromise
. Ad esempio, la funzione riportata sopra attende il risultato della registrazione di un service worker prima di aggiornare la UI. Per ulteriori informazioni, consultaawait
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 funzionegetRegistration
con il seguente codice:// Get the current service worker registration.
function getRegistration() {
return navigator.serviceWorker.getRegistration();
}La funzione sopra riportata utilizza l'API Service Worker per recuperare la registrazione attuale del service worker, se esistente. Rende un po' più comodo ottenere un riferimento alla registrazione del servizio 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();
}
Nella scheda in cui stai visualizzando l'app in tempo reale, ricarica la pagina. I pulsanti Registra service worker e Annulla registrazione del service worker dovrebbero ora 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 crea una notifica, verifica che un servizio worker sia registrato e poi invia la notifica al servizio worker utilizzando il relativo metodo postMessage
.
Nell'editor Glitch incorporato, apri public/index.js
e
sostituire 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 fa questo codice:
sendNotification
è una funzione asincrona, quindi puoi utilizzarla per ottenere un riferimento alla registrazione del worker del servizio.await
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 funzionepostMessage
.navigator.serviceWorker.controller
sarànull
se non è presente alcun service worker attivo o se la pagina è stata aggiornata forzatamente (Shift+
Ricarica). Per ulteriori informazioni, consulta la documentazione relativa ai controller ServiceWorker su MDN.
Gestire le notifiche nel service worker
In questo passaggio, scriverai codice nel service worker che gestirà i messaggi pubblicati e mostrerà le notifiche all'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 bloccocatch
per evitare un errore di rifiutoPromise
non rilevato e gestirlo in modo un po' più elegante.
Se non riesci ad andare avanti, visita la pagina glitch.com/edit/#!/codelab-notifications-service-worker-completed per visualizzare il codice completo.
Vai al prossimo codelab di questa serie: Creare un server di notifiche push.