Comportamento delle notifiche

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, l'uso di showNotification() con solo opzioni visive avrà i seguenti comportamenti:

  • Il clic sulla notifica non produce alcun effetto.
  • Ogni nuova notifica viene mostrata una dopo l'altra. Il browser non comprime in alcun modo le notifiche.
  • 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 altre la mostrano, a meno che l'utente non interagisca con essa. Ad esempio, puoi confrontare le notifiche su Android e computer.

In questa sezione osserveremo come modificare questi comportamenti predefiniti utilizzando solo le opzioni. 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 succede nulla. Non chiude o rimuove nemmeno la notifica.

La pratica comune per un clic sulla notifica è che venga chiusa ed eseguita un'altra logica (ad es. aprire una finestra o effettuare una chiamata API all'applicazione).

Per farlo, devi aggiungere un ascoltatore di eventi 'notificationclick' al nostro service worker. Verrà chiamato ogni volta che verrà fatto 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 puoi vedere in questo esempio, alla notifica su cui è stato fatto clic è possibile accedere come event.notification. Da qui puoi accedere alle proprietà e ai metodi della notifica. In questo caso, chiami il metodo close() ed eseguirai altre operazioni.

Azioni

Le azioni ti consentono di creare un altro livello di interazione con gli utenti semplicemente facendo 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 capire su quale pulsante di azione è stato fatto clic.

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

In questo modo, rileveremo i clic sulle notifiche o sulle azioni come segue:

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 in che modo più notifiche vengono visualizzate all'utente. È più facile da spiegare con un esempio.

Visualizziamo una notifica e assegnamole un tag, 'message-group-1'. Visualizzeremo 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);

Verrà visualizzata la nostra prima notifica.

Prima notifica con tag del gruppo di messaggi 1.

Mostriamo 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);

Verrà visualizzata una seconda notifica all'utente.

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

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

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 alcun suono o vibrazione.

È qui che entra in gioco l'opzione renotify.

Invia di nuovo notifica

Questo vale in gran parte per i dispositivi mobili al momento della stesura di questo articolo. Se imposti questa opzione, le nuove notifiche vibrano e viene riprodotto un suono di sistema.

In alcuni casi potresti voler inviare una notifica di sostituzione per informare l'utente anziché eseguire un aggiornamento 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 consente di mostrare una nuova notifica, ma impedisce il comportamento predefinito della vibrazione, del suono e dell'attivazione del display del dispositivo.

Si tratta della soluzione ideale se le notifiche non richiedono attenzione immediata da parte dell'utente.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Richiede interazione

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

Per fare in modo che una notifica rimanga visibile finché l'utente non interagisce con essa, aggiungi l'opzione requireInteraction. La notifica verrà mostrata finché l'utente non la chiude o non fa clic su di essa.

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 sezione successiva 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