Perché utilizzare le notifiche push?
Le notifiche presentano piccoli blocchi di informazioni a un utente. Le app web possono utilizzare le notifiche per informare gli utenti di eventi importanti e urgenti o di azioni che devono intraprendere.
L'aspetto delle notifiche varia da una piattaforma all'altra. Ad esempio:
Tradizionalmente, i browser web dovevano avviare lo scambio di informazioni tra server e client inviando una richiesta. La tecnologia push web, invece, ti consente di configurare il server in modo che invii notifiche quando è opportuno per la tua app. Un servizio push crea URL univoci per ogni worker di servizio iscritto. L'invio di messaggi all'URL di un service worker genera eventi in quel service worker, chiedendogli di mostrare una notifica.
Le notifiche push possono aiutare gli utenti a ottenere il massimo dalla tua app chiedendo loro di riaprirla e utilizzarla in base alle informazioni più recenti.
Creazione e invio di notifiche
Crea notifiche utilizzando l'API Notifications. Un oggetto Notification
ha una stringa title
e un oggetto options
. Ad esempio:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
Il title
viene visualizzato in grassetto quando la notifica è attiva, mentre il body
contiene testo aggiuntivo.
Ottenere l'autorizzazione per inviare notifiche
Per mostrare una notifica, l'app deve ottenere l'autorizzazione dell'utente:
Notification.requestPermission();
Come funzionano le notifiche push?
La vera potenza delle notifiche deriva dalla combinazione di service worker e tecnologia push:
I service worker possono essere eseguiti in background e mostrare le notifiche anche quando l'app non è visibile sullo schermo.
La tecnologia push ti consente di configurare il server in modo che invii notifiche quando è opportuno per la tua app. Un servizio push crea URL univoci per ogni worker di servizio iscritto. L'invio di messaggi all'URL di un service worker genera eventi in quel service worker, chiedendogli di mostrare una notifica.
Nel seguente flusso di esempio, un client registra un service worker e si iscrive alle notifiche push. Il server invia quindi una notifica all'endpoint di sottoscrizione.
Il client e il service worker utilizzano JavaScript standard senza librerie aggiuntive. Il server viene creato con il pacchetto npm express
su Node.js e utilizza il pacchetto npm web-push
per inviare notifiche. Per inviare informazioni al server, il client effettua una chiamata a un URL POST esposto dal server.
Parte 1: registra un service worker e iscriviti a Push
Un'app client registra un service worker con
ServiceWorkerContainer.register()
. Il service worker registrato continuerà a funzionare in background quando il client è inattivo.Codice cliente:
navigator.serviceWorker.register('sw.js');
Il client richiede all'utente l'autorizzazione per inviare notifiche.
Codice cliente:
Notification.requestPermission();
Per attivare le notifiche push, il service worker utilizza
PushManager.subscribe()
per creare un abbonamento push. Nella chiamata aPushManager.subscribe()
, il service worker fornisce la chiave API dell'app come identificatore.Codice cliente:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});I servizi push come Firebase Cloud Messaging funzionano su un modello di abbonamento. Quando un service worker si iscrive a un servizio push chiamando
PushManager.subscribe()
, il servizio push crea un URL univoco per quel service worker. L'URL è noto come endpoint di sottoscrizione.Il client invia l'endpoint dell'abbonamento al server dell'app.
Codice cliente:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Codice del server:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Parte 2: inviare una notifica
Il server web invia una notifica all'endpoint dell'abbonamento.
Codice del server:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Le notifiche inviate all'endpoint di sottoscrizione attivano eventi push con il servizio worker come target. Il service worker riceve il messaggio e lo mostra all'utente come notifica.
Codice del service worker:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})L'utente interagisce con la notifica, attivando l'app web, se non lo ha già fatto.
Passaggi successivi
Come passaggio successivo, implementa le notifiche push.
Abbiamo creato una serie di codelab per guidarti in ogni fase della procedura.