JavaScript: Notification API

E' già da qualche anno che il browser non è solo uno strumento per cercare informazioni ma è diventato una parte fondamentale della nostra vita quotidiana su internet. Dalle semplici pagine statiche degli anni 90, siamo passati a complesse applicazioni che si stanno equiparando alle applicazioni native presenti sui nostri PC o devices.

Oggi parliamo delle Notification API. Come suggerisce il nome le Notification API permettono di inviare al visitatore di una pagina web o applicazioni, 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. Un esempio di base da utilizzare nei nostri script può essere:

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.

Un esempio più completo può essere:

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

Invia notifica

Le Notification API sono implementate con un buon supporto in Mozilla Firefox, Chrome, Chromium, Safari ed Opera. Non è ancora presente l'implementazione in Internet Explorer (forse farà la comparsa su Edge).

• https://notifications.spec.whatwg.org/
• http://www.w3.org/TR/notifications/