Utilizza le notifiche push per coinvolgere e coinvolgere nuovamente gli utenti

Kate Jeffreys
Kate Jeffreys

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:

Una notifica su un dispositivo Android.
Una notifica su un MacBook.

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

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

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

  1. 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);
  2. 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);
    })
  3. 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.