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 alterano il comportamento delle notifiche.

Per impostazione predefinita, le chiamate a showNotification() con le sole opzioni visive saranno quanto segue comportamenti:

  • Facendo clic sulla notifica non succede nulla.
  • Ogni nuova notifica viene visualizzata una dopo l'altra. Il browser non comprime notifiche in qualsiasi 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 mostrano la notifica, a meno che l'utente non vi interagisca. Ad esempio, confronta le notifiche su Android e computer.

In questa sezione, vedremo come modificare questi comportamenti predefiniti utilizzando le opzioni. da soli. Sono relativamente facili da implementare e sfruttare.

Notifica clic evento

Quando un utente fa clic su una notifica, il comportamento predefinito prevede che non avvenga nulla. Non o persino chiudere o rimuovere la notifica.

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

A questo scopo, devi aggiungere un listener di eventi 'notificationclick' al nostro service worker. Questo verrà chiamato ogni volta che viene 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, la notifica su cui è stato fatto clic è accessibile event.notification. Da qui puoi accedere alle proprietà e ai metodi della notifica. In questo case, chiami il relativo metodo close() ed eseguirai altre operazioni.

Azioni

Le azioni ti consentono di creare un altro livello di interazione con gli utenti semplicemente facendo clic sul notifica.

Pulsanti

Nella sezione precedente hai visto come definire i pulsanti di azione durante la chiamata a 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 in noticationclick per indicare 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 saranno uno dei seguenti: 'coffee-action', 'doughnut-action', 'gramophone-action' o 'atom-action'.

In questo modo, vengono rilevati i clic sulle notifiche o i clic sulle azioni come quelli indicati di seguito:

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 "gruppi" le notifiche insieme, fornendo una facile per stabilire come mostrare più notifiche all'utente. È più facile da spiegare con un esempio.

Visualizziamo una notifica e assegniamo un tag di 'message-group-1'. Vengono visualizzati i 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 per l'utente.

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 chiude la prima notifica e la sostituisce 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 è sostituita da una terza.

L'opzione tag è semplicemente un modo per raggruppare i messaggi in modo che tutte le notifiche meno recenti attualmente visualizzati verranno chiusi 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 notifiche vibrano e riproducono un suono di sistema.

In alcuni casi potrebbe essere opportuno inviare una notifica di sostituzione all'utente anziché inviare una notifica l'aggiornamento silenzioso. Le applicazioni di chat sono un buon esempio. In questo caso, devi impostare tag e renotify a 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 della vibrazione. e accendere il 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 mostrerà le notifiche per un determinato periodo di tempo prima di nasconderle. Chrome attivo Android non ha questo comportamento. Le notifiche rimangono visualizzate finché l'utente non vi interagisce.

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Utilizza questa opzione con considerazione. Mostrare una notifica e costringere l'utente a interrompere la cosa stanno facendo per ignorare la notifica, può essere frustrante.

Nella prossima sezione, esamineremo alcuni dei pattern comuni utilizzati sul web per la gestione delle notifiche e l'esecuzione di azioni come l'apertura di pagine quando si fa clic su una notifica.

Passaggi successivi

Codelab