programming:js-notification-api

This is an old revision of the document!


JavaScript: Notification API

Con questa piccola guida introdurremo le Notification API che permettono di 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 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 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. Un esempio 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:

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.

Le Notification API mette a disposizione diverse proprietà che arricchiscono l'esperienza utente. Quelle maggiormente supportate 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:

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:

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);
      }
    });
  }
 
}
<button onclick="notify('Hello, World!', { body: 'Questa è la mia prima notifica' })">Invia notifica</button>

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


1)
Web Hypertext Application Technology Working Group
2)
World Wide Web Consortium
  • programming/js-notification-api.1435074295.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi