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 ¹⁾ come living-standard e dal W3C ²⁾ 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:

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:

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