Perché usare le notifiche push?
Le notifiche presentano agli utenti piccoli blocchi di informazioni. Le app web possono utilizzare le notifiche per informare gli utenti di azioni o eventi importanti e urgenti che l'utente deve intraprendere.
L'aspetto delle notifiche varia a seconda della piattaforma. Ad esempio:
di Gemini Advanced.Tradizionalmente, i browser web dovevano avviare lo scambio di informazioni tra server e client effettuando una richiesta. La tecnologia web push, 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 service worker abbonato. L'invio di messaggi all'URL di un service worker genera eventi per quel service worker, invitandolo a visualizzare 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 le 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 body
contiene testo aggiuntivo.
Richiedere l'autorizzazione per l'invio di notifiche
Per poter visualizzare una notifica, l'app deve ottenere l'autorizzazione dell'utente:
Notification.requestPermission();
Come funzionano le notifiche push?
Il vero potere delle notifiche deriva dalla combinazione di service worker e tecnologia push:
I operatori dei servizi possono essere eseguiti in background e mostrare le notifiche anche quando la tua 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 service worker abbonato. L'invio di messaggi all'URL di un service worker genera eventi per quel service worker, invitandolo a visualizzare una notifica.
Nel flusso di esempio seguente, un client registra un service worker e sottoscrive le notifiche push. Quindi, il server invia una notifica all'endpoint di abbonamento.
Il client e il service worker usano JavaScript Vanilla senza ulteriori librerie. Il server è stato 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 che il server ha esposto.
Parte 1: registra un service worker e iscriviti alla modalità push
Un'app client registra un service worker con
ServiceWorkerContainer.register()
. Il service worker registrato continuerà a essere eseguito in background quando il client non è attivo.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 una sottoscrizione 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 operano in base a un modello di abbonamento. Quando un service worker si abbona a un servizio push chiamando
PushManager.subscribe()
, il servizio push crea un URL univoco per quel service worker. L'URL è noto come endpoint di abbonamento.Il client invia l'endpoint di abbonamento al server delle app.
Codice cliente:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Codice server:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Parte 2: invia una notifica
Il server web invia una notifica all'endpoint di abbonamento.
Codice 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 dell'abbonamento attivano gli eventi push con il service worker come destinazione. 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, rendendo attiva l'app web, se non era già attiva.
Passaggi successivi
Come passaggio successivo, implementa le notifiche push.
Abbiamo creato una serie di codelab per guidarti in ogni fase del processo.