JavaScript: Notification API [Lotar's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== JavaScript: Notification API ======

{{http://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png?50 }} 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 [[https://notifications.spec.whatwg.org/|WHATWG]] ((Web Hypertext Application Technology Working Group)) come //living-standard// e dal [[http://www.w3.org/TR/notifications/|W3C]] ((World Wide Web Consortium)) come //raccomandazione//.

Ma vediamola in azione...

===== Hello, World! =====

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

<code javascript>
new Notification('Hello, World!');
</code>

===== Chiediamo il permesso =====

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ì:

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

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:

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

===== Mettiamo in pratica quello che abbiamo imparato =====

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

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

}
</file>

Possiamo ad esempio richiamare questa funzione JS semplicemente cliccando su un bottone:

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

<html>
<script>
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);
      }
    });
  }
 
}
</script>

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

</html>

===== Supporto nei browser =====

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

===== Ulteriori informazioni ====
  * https://notifications.spec.whatwg.org/
  * http://www.w3.org/TR/notifications/

{{tag>programming js}}
Lotar's Wiki

Wiki

DokuWiki Template & Plugins

Info

Wiki

DokuWiki Template & Plugins

Info

Social
