Questo codelab mostra, passo dopo passo, come creare un server di notifiche push. Al termine del codelab avrai un server che:
- Tiene traccia delle iscrizioni alle notifiche push (ad esempio, il server crea un nuovo record di database quando un client attiva le notifiche push ed elimina un record di database esistente quando un client disattiva)
- Invia una notifica push a un singolo client
- Invia una notifica push a tutti i client iscritti
Questo codelab è pensato per aiutarti a imparare facendo pratica e non parla molto di concetti. Consulta Come funzionano le notifiche push? per informazioni sui concetti delle notifiche push.
Il codice client di questo codelab è già stato completato. Implementerai il server solo in questo codelab. Per informazioni su come implementare un client di notifica push, consulta Codelab: creare un client di notifiche push.
Consulta la pagina push-notifications-server-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
Stack di applicazioni
- Il server è basato su Express.js.
- La libreria Node.js web-push gestisce tutta la logica delle notifiche push.
- I dati degli abbonamenti vengono scritti in un file JSON utilizzando lowdb.
Non è necessario utilizzare nessuna di queste tecnologie per implementare le notifiche push. Abbiamo scelto queste tecnologie perché offrono un'esperienza codelab affidabile.
Configurazione
Ottieni una copia modificabile del codice
L'editor di codice che vedi a destra di queste istruzioni sarà denominato UI di Glitch in questo codelab.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
Configura l'autenticazione
Prima di poter attivare le notifiche push, devi configurare il server e il client con le chiavi di autenticazione. Per scoprire il motivo, consulta l'articolo Firmare le richieste del protocollo web push.
- Apri il terminale Glitch facendo clic su Strumenti e poi su Terminale.
- Nel terminale, esegui
npx web-push generate-vapid-keys
. Copia la chiave privata e i valori delle chiavi pubbliche. - Apri
.env
e aggiornaVAPID_PUBLIC_KEY
eVAPID_PRIVATE_KEY
. ImpostaVAPID_SUBJECT
sumailto:test@test.test
. Tutti questi valori devono essere racchiusi tra virgolette doppie. Dopo aver apportato gli aggiornamenti, il file.env
dovrebbe essere simile a questo:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Chiudi il terminale Glitch.
- Apri
public/index.js
. - Sostituisci
VAPID_PUBLIC_KEY_VALUE_HERE
con il valore della tua chiave pubblica.
Gestisci sottoscrizioni
Il cliente gestisce la maggior parte della procedura di abbonamento. Il server deve eseguire principalmente le operazioni di salvataggio delle nuove iscrizioni alle notifiche push e di eliminazione delle vecchie iscrizioni. Queste sottoscrizioni ti consentono di inviare messaggi ai client in futuro. Per ulteriori informazioni sul processo di abbonamento, consulta Iscrivere il client alle notifiche push.
Salvare le informazioni del nuovo abbonamento
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
- Fai clic su Registra service worker nella scheda dell'app. Nella casella di stato dovresti vedere un messaggio simile a questo:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
- Nella scheda dell'app, fai clic su Iscriviti per inviare push. Il tuo browser o sistema operativo ti chiederà se vuoi consentire al sito web di inviarti notifiche push. Fai clic su Consenti (o su qualsiasi frase equivalente utilizzata dal browser/sistema operativo). Nella casella di stato dovresti vedere un messaggio simile a questo:
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- Torna al codice facendo clic su Visualizza sorgente nell'interfaccia utente di Glitch.
- Apri i log di Glitch facendo clic su Strumenti e quindi su Log. Dovresti vedere
/add-subscription
seguito da alcuni dati./add-subscription
è l'URL a cui il client invia una richiesta POST quando vuole iscriversi alle notifiche push. I dati di seguito sono le informazioni sull'abbonamento del client che devi salvare. - Apri
server.js
. - Aggiorna la logica del gestore delle route
/add-subscription
con il seguente codice:
app.post('/add-subscription', (request, response) => {
console.log('/add-subscription');
console.log(request.body);
console.log(`Subscribing ${request.body.endpoint}`);
db.get('subscriptions')
.push(request.body)
.write();
response.sendStatus(200);
});
Elimina le informazioni sull'abbonamento precedenti
- Torna alla scheda dell'app.
- Fai clic su Annulla iscrizione alle notifiche push.
- Esamina di nuovo i log di Glitch. Dovresti vedere
/remove-subscription
seguito dalle informazioni sull'abbonamento del cliente. - Aggiorna la logica del gestore delle route
/remove-subscription
con il seguente codice:
app.post('/remove-subscription', (request, response) => {
console.log('/remove-subscription');
console.log(request.body);
console.log(`Unsubscribing ${request.body.endpoint}`);
db.get('subscriptions')
.remove({endpoint: request.body.endpoint})
.write();
response.sendStatus(200);
});
Invia notifiche
Come spiegato nella sezione Inviare un messaggio push, il server non invia effettivamente i messaggi push direttamente ai client. che si affida piuttosto a un servizio push. In pratica, il server avvia il processo di push dei messaggi ai client inviando richieste di servizio web (richieste di protocollo web push) a un servizio web (il servizio push) di proprietà del fornitore del browser utilizzato dall'utente.
- Aggiorna la logica del gestore delle route
/notify-me
con il seguente codice:
app.post('/notify-me', (request, response) => {
console.log('/notify-me');
console.log(request.body);
console.log(`Notifying ${request.body.endpoint}`);
const subscription =
db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
sendNotifications([subscription]);
response.sendStatus(200);
});
- Aggiorna la funzione
sendNotifications()
con il seguente codice:
function sendNotifications(subscriptions) {
// TODO
// Create the notification content.
const notification = JSON.stringify({
title: "Hello, Notifications!",
options: {
body: `ID: ${Math.floor(Math.random() * 100)}`
}
});
// Customize how the push service should attempt to deliver the push message.
// And provide authentication information.
const options = {
TTL: 10000,
vapidDetails: vapidDetails
};
// Send a push message to each client specified in the subscriptions array.
subscriptions.forEach(subscription => {
const endpoint = subscription.endpoint;
const id = endpoint.substr((endpoint.length - 8), endpoint.length);
webpush.sendNotification(subscription, notification, options)
.then(result => {
console.log(`Endpoint ID: ${id}`);
console.log(`Result: ${result.statusCode}`);
})
.catch(error => {
console.log(`Endpoint ID: ${id}`);
console.log(`Error: ${error} `);
});
});
}
- Aggiorna la logica del gestore delle route
/notify-all
con il seguente codice:
app.post('/notify-all', (request, response) => {
console.log('/notify-all');
response.sendStatus(200);
console.log('Notifying all subscribers');
const subscriptions =
db.get('subscriptions').cloneDeep().value();
if (subscriptions.length > 0) {
sendNotifications(subscriptions);
response.sendStatus(200);
} else {
response.sendStatus(409);
}
});
- Torna alla scheda dell'app.
- Fai clic su Annulla iscrizione alle notifiche push, quindi fai di nuovo clic su Iscriviti per inviare le notifiche. Questa operazione è necessaria solo perché, come accennato prima, Glitch riavvia il progetto ogni volta che modifichi il codice e il progetto è configurato per eliminare il database all'avvio.
- Fai clic su Avvisami. Dovresti ricevere una notifica push. Il titolo deve essere
Hello, Notifications!
e il corpo deve essereID: <ID>
, dove<ID>
è un numero casuale. - Apri l'app su altri browser o dispositivi, prova a iscriverti alle notifiche push, quindi fai clic sul pulsante Invia notifiche a tutti. Dovresti ricevere la stessa notifica su tutti i dispositivi in abbonamento (ad esempio, l'ID nel corpo della notifica push dovrebbe essere lo stesso).
Passaggi successivi
- Per una comprensione concettuale più approfondita di come funzionano le notifiche push, consulta Panoramica delle notifiche push.
- Consulta Codelab: creare un client di notifiche push per scoprire come creare un client che richiede l'autorizzazione alle notifiche, sottoscrive il dispositivo per ricevere notifiche push e utilizza un service worker per ricevere messaggi push e visualizzarli sotto forma di notifiche.