Utilizza le notifiche push per coinvolgere e coinvolgere nuovamente gli utenti

Kate Jeffreys

Perché utilizzare le notifiche push?

Le notifiche mostrano all'utente piccoli blocchi di informazioni. Le app web possono usare le notifiche per comunicare agli utenti eventi o azioni importanti e urgenti che devono essere eseguiti dall'utente.

L'aspetto delle notifiche varia a seconda della piattaforma. Ad esempio:

Tradizionalmente, i browser web dovevano avviare lo scambio di informazioni tra server e client tramite l'invio di una richiesta. La tecnologia push web, invece, ti consente di configurare il tuo server per l'invio di notifiche quando opportuno per la tua app. Un servizio push crea URL univoci per ciascun service worker in abbonamento. L'invio di messaggi all'URL di un service worker genera eventi su quel service worker, che gli chiede di visualizzare una notifica.

Le notifiche push possono aiutare gli utenti a ottenere il massimo dalla tua app invitandoli a riaprirla e a 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);

La title viene visualizzata in grassetto quando la notifica è attiva, mentre la body contiene testo aggiuntivo.

Richiedere l'autorizzazione per inviare notifiche

Per visualizzare una notifica, l'app deve ottenere l'autorizzazione dall'utente:

Notification.requestPermission();

Come funzionano le notifiche push?

Il vero potere delle notifiche deriva dalla combinazione di service worker e tecnologia push:

• I service worker possono essere eseguiti in background e visualizzare le notifiche anche quando la tua app non è visibile sullo schermo.

• La tecnologia push ti consente di configurare il server per l'invio di notifiche quando opportuno per la tua app. Un servizio push crea URL univoci per ciascun service worker in abbonamento. L'invio di messaggi all'URL di un service worker genera eventi su quel service worker, che gli chiede di visualizzare una notifica.

Nel flusso di esempio seguente, un client registra un service worker e si iscrive alle notifiche push. Successivamente, il server invia una notifica all'endpoint dell'abbonamento.

Il client e il service worker utilizzano JavaScript vanilla senza librerie aggiuntive. Il server è stato creato con il pacchetto express npm su Node.js e utilizza il web-push pacchetto npm 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

1. 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');
   

2. Il client richiede all'utente l'autorizzazione per inviare notifiche.

   Codice cliente:

   Notification.requestPermission();
   

3. Per abilitare le notifiche push, il service worker utilizza PushManager.subscribe() per creare un abbonamento push. Nella chiamata a PushManager.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 dell'abbonamento.

4. 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

1. Il server web invia una notifica all'endpoint dell'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);
   

2. Le notifiche inviate all'endpoint di abbonamento attivano gli eventi push con il service worker come target. Il service worker riceve il messaggio e lo visualizza 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);
   })
   

3. L'utente interagisce con la notifica, rendendo attiva l'app web se non lo era già.

Passaggi successivi

Come passaggio successivo, implementa le notifiche push.

Abbiamo creato una serie di codelab per guidarti in ogni fase del processo.