JavaScript: Notification API

Con questa piccola guida sarà introdotta la Notification API che permette al browser di far interagire ed integrare la nostra web-application con il desktop del visitatore.

Già da qualche anno il browser è diventato non solo uno strumento per fruire informazioni ma è diventato 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.

Oggi parliamo della 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.

Le specifiche di riferimento sono state rilasciate dallo WHATWG 1) come living-standard e dal W3C 2) come raccomandazione.

Ma vediamola in azione…

Entrambe le specifiche utilizzano l'oggetto/costruttore Notification per inviare la notifica al visitatore. Ecco un esempio:

new Notification('Hello, World!');

Se proviamo a eseguire questo pezzo di codice 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

Pertanto il codice di prima dovrà essere modificato così:

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.

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'
});

Un esempio completo di tutto quello che abbiamo imparato, può essere:

notify.js
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:

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

Ecco una prova:

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


1)
Web Hypertext Application Technology Working Group
2)
World Wide Web Consortium