Comportamento delle notifiche

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Matt Gaunt
X Home page

Finora abbiamo esaminato le opzioni che modificano l'aspetto visivo di una notifica. Esistono anche opzioni che modificano il comportamento delle notifiche.

Per impostazione predefinita, la chiamata di showNotification() con solo opzioni visive avrà i seguenti comportamenti:

  • Se fai clic sulla notifica, non succede nulla.
  • Ogni nuova notifica viene mostrata una dopo l'altra. Il browser non comprimerà le notifiche in alcun modo.
  • La piattaforma potrebbe riprodurre un suono o far vibrare il dispositivo dell'utente (a seconda della piattaforma).
  • Su alcune piattaforme, la notifica scompare dopo un breve periodo di tempo, mentre su altre viene mostrata finché l'utente non interagisce con essa. (Ad esempio, confronta le notifiche su Android e su computer).

In questa sezione vedremo come modificare questi comportamenti predefiniti utilizzando solo le opzioni. Queste sono relativamente facili da implementare e sfruttare.

Evento di clic sulla notifica

Quando un utente fa clic su una notifica, il comportamento predefinito è che non succeda nulla. La notifica non viene nemmeno chiusa o rimossa.

La prassi comune per un clic su una notifica è che questa si chiuda ed esegua un'altra logica (ad esempio, apra una finestra o effettui una chiamata API all'applicazione).

Per farlo, devi aggiungere un listener di eventi 'notificationclick' al nostro service worker. Questo verrà chiamato ogni volta che si fa clic su una notifica.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Come vedi in questo esempio, è possibile accedere alla notifica su cui è stato fatto clic come event.notification. Da qui, puoi accedere alle proprietà e ai metodi della notifica. In questo caso, chiami il metodo close() ed esegui un lavoro aggiuntivo.

Azioni

Le azioni ti consentono di creare un altro livello di interazione con gli utenti oltre al semplice clic sulla notifica.

Pulsanti

Nella sezione precedente, hai visto come definire i pulsanti di azione quando chiami showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Se l'utente fa clic su un pulsante di azione, controlla il valore event.action nell'evento noticationclick per sapere su quale pulsante di azione è stato fatto clic.

event.action conterrà il valore action impostato nelle opzioni. Nell'esempio precedente, i valori event.action sarebbero uno dei seguenti: 'coffee-action', 'doughnut-action', 'gramophone-action' o 'atom-action'.

In questo modo, possiamo rilevare i clic sulle notifiche o sulle azioni, ad esempio:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Risposte in linea

Inoltre, nella sezione precedente hai visto come aggiungere una risposta in linea alla notifica:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply conterrà il valore digitato dall'utente nel campo di immissione:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Tag

L'opzione tag è essenzialmente un ID stringa che "raggruppa" le notifiche, fornendo un modo semplice per determinare come vengono visualizzate più notifiche per l'utente. Il modo più semplice per spiegarlo è con un esempio.

Mostriamo una notifica e assegniamole il tag 'message-group-1'. Visualizzeremmo la notifica con questo codice:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

che mostrerà la nostra prima notifica.

Prima notifica con tag del gruppo di messaggi 1.

Visualizziamo una seconda notifica con un nuovo tag di 'message-group-2', in questo modo:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

In questo modo, l'utente visualizzerà una seconda notifica.

Due notifiche in cui il secondo tag del gruppo di messaggi 2.

Ora mostriamo una terza notifica, ma riutilizziamo il primo tag di 'message-group-1'. In questo modo, la prima notifica verrà chiusa e sostituita con la nuova.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Ora abbiamo due notifiche, anche se showNotification() è stato chiamato tre volte.

Due notifiche in cui la prima viene sostituita da una terza.

L'opzione tag è semplicemente un modo per raggruppare i messaggi in modo che le notifiche precedenti attualmente visualizzate vengano chiuse se hanno lo stesso tag di una nuova notifica.

Una particolarità dell'utilizzo di tag è che, quando sostituisce una notifica, lo fa senza suoni o vibrazioni.

È qui che entra in gioco l'opzione renotify.

Invia di nuovo la notifica

Al momento della stesura di questo articolo, ciò si applica principalmente ai dispositivi mobili. Se imposti questa opzione, le nuove notifiche vibrano e riproducono un suono di sistema.

Esistono scenari in cui potresti voler inviare una notifica di sostituzione per informare l'utente anziché eseguire l'aggiornamento in modo silenzioso. Le applicazioni di chat sono un buon esempio. In questo caso, devi impostare tag e renotify su true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Silenzioso

Questa opzione ti consente di mostrare una nuova notifica, ma impedisce il comportamento predefinito di vibrazione, suono e attivazione del display del dispositivo.

Questa opzione è ideale se le notifiche non richiedono l'attenzione immediata dell'utente.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Richiede interazione

Chrome su computer mostrerà le notifiche per un periodo di tempo prestabilito prima di nasconderle. Chrome su Android non ha questo comportamento. Le notifiche vengono visualizzate finché l'utente non interagisce con loro.

Per forzare la visualizzazione di una notifica finché l'utente non interagisce con questa, aggiungi l'opzione requireInteraction. In questo modo, la notifica verrà mostrata finché l'utente non la chiude o non fa clic sulla notifica.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Utilizza questa opzione con cautela. Mostrare una notifica e costringere l'utente a interrompere ciò che sta facendo per ignorarla può essere frustrante.

Nella prossima sezione, esamineremo alcuni dei pattern comuni utilizzati sul web per gestire le notifiche ed eseguire azioni come l'apertura di pagine quando si fa clic su una notifica.

Passaggi successivi

Codelab