Sfruttare la Notification API per visualizzare notifiche sul browser

In questo breve post spiegherò l'implementazione della Notification API che permette al browser di far interagire ed integrare la nostra web-application con il desktop del visitatore.

Ho avuto l'esigenza di utilizzare questo sistema perchè stavo sviluppando una web application ed avevo la necessità di renderla più fika aggiungendo delle notifiche sul browser sostituendo le classiche popup javascript.

Cosa sono le Notification API?

Già da qualche anno il browser è passato da semplice strumento per la visualizzazione di siti e webapps a strumento per fruire informazioni passando ad una parte fondamentale della nostra vita quotidiana e lavorativa.
Dalle semplici pagine statiche degli anni 90, siamo passati a complesse web-application che piano-piano si stanno equiparando alle applicazioni native presenti sui nostri PC o devices.

Ma andiamo a vedere la Notification API.
Come suggerisce il nome la Notification API permette di inviare al visitatore di una pagina web o web-application, una notifica (generalmente una pop-up sul desktop vicino all'area di notifica) come ad esempio l'arrivo di un nuovo messaggio o il cambio di uno stato nell'applicazione.

Tale especifica utilizza l'oggetto/costruttore Notification per inviare la notifica al visitatore. Ma iniziamo con la pratica:

new Notification('Hello, World!');

Il prossimo passo è chiedere il permesso

Se proviamo a eseguire il pezzo di codice sopra non vedremo un bel niente, questo perchè è necessario chiedere il “permesso” al visitatore per potergli inviare una notifica.

 La Notification API mette a disposizione una proprietà  chiamata Notification.permission dove è impostato se il visitatore ha espresso o meno la facolta di ricevere la notifica.
I valori che questa proprietà può assumere sono:

default	Il visitatore ancora non ha scelto se ricevere la notifica dalla pagina web
granted	Il visitatore ha scelto di voler ricevere la notifica dalla pagina web
denied	Il visitatore ha scelto di non voler ricevere la notifica dalla pagina web

Per rendere funzionante il pezzo di codice visto sopra dovremo modificarlo in questo modo:

Notification.requestPermission(function(permission) {
  if (permission === 'granted') {
    var notification = new Notification('Hello, World!');
  }
});

In questo modo comparirà una pop-up sul browser per chiedere all'utente se vuole ricevere una notifica dalla pagina web.

Le opzioni a disposizione

La Notification API mette a disposizione diverse proprietà che arricchiscono l'esperienza utente. Quelle maggiormente supportate ed implementate dai browser sono:

Notification.title	Il titolo della notifica
Notification.dir	La direzione del testo della notifica (ltr, rtl)
Notification.lang	La lingua della notifica (es. it_IT)
Notification.body	Il corpo della notifica
Notification.tag	L' ID della notifica
Notification.icon	L'URL dell'immagine utilizzata come icona della notifica
Notification.data	Ritorna l'oggeto della notifica

Se ad esempio volessimo inviare una notifica più strutturata basterà utilizzare una delle proprietà sopracitate da passare al costruttore:

new Notification('Titolo della notifica', {
  'body' : 'Corpo della notifica',
  'icon' : 'http://example.org/icon.png'
});

Adesso che abbiamo imparato vediamo la pratica:

La Notification API mette a disposizione diverse proprietà che completano l'esperienza utente.
Di seguito elencherò quelle supportate ed implementate dai browser più utilizzati:

Notification.title	Il titolo della notifica
Notification.dir	La direzione del testo della notifica (ltr, rtl)
Notification.lang	La lingua della notifica (es. it_IT)
Notification.body	Il corpo della notifica
Notification.tag	L' ID della notifica
Notification.icon	L'URL dell'immagine utilizzata come icona della notifica
Notification.data	Ritorna l'oggeto della notifica

Ipotizziamo di inviare una notifica più strutturata, basterà quindi utilizzare una delle proprietà sopracitate da passare al costruttore:

new Notification('Titolo della notifica', {
  'body' : 'Corpo della notifica',
  'icon' : 'http://example.org/icon.png'
});

Ecco un esempio concreto

Nel codice qui sotto ho voluto creare un listato con tutto quello che abbiamo imparato:
(inserire questo codice nella <head></head> della pagina)

function notify(title, options) {
 
  options = options || {};
 
  // Controlla che il browser supporta le Notification API
  if (!("Notification" in window)) {
    alert("Questo browser non supporta le notifiche desktop");
  }
 
  // Controlla che siano già stati dati i permessi per inviare la notifica
  else if (Notification.permission === "granted") {
    var notification = new Notification(title, options);
  }
 
  // Altrimenti chiede all'utente di accettare o meno le notifiche
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if (permission === "granted") {
        var notification = new Notification(title, options);
      }
    });
  }
 
}

Possiamo ad esempio richiamare questa funzione JS semplicemente cliccando su un bottone da inserire nel <boby> della pagina:

<button onclick="notify('Hello, World!', { body: 'Questa è la mia prima notifica', icon: 'http://lotar.altervista.org/dokuwiki/_media/wiki/logo.png' })">Invia notifica</button>

Quali browser supportano la Notification API?

La Notification API è implemetata con un buon supporto di base su Mozilla Firefox, Chrome, Chromium, Safari ed Opera. Attualmente non è ancora presente un'implementazione in Internet Explorer (forse farà la comparsa su Edge).