Utilizza le notifiche push per coinvolgere e coinvolgere nuovamente gli utenti

Kate Jeffreys
Kate Jeffreys

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:

Una notifica su un dispositivo Android.
di Gemini Advanced.
Una notifica su un MacBook.

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

  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 attivare le notifiche push, il service worker utilizza PushManager.subscribe() per creare una sottoscrizione 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 di 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 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);
  2. 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);
    })
  3. 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.