programming:js-notification-api

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
programming:js-notification-api [2015/06/23 17:44]
Giuseppe Di Terlizzi [Hello, World!]
programming:js-notification-api [2015/06/23 18:03] (current)
Giuseppe Di Terlizzi [Mettiamo in pratica quello che abbiamo imparato]
Line 1: Line 1:
 ====== JavaScript: Notification API ====== ====== JavaScript: Notification API ======
  
-{{http://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png?50 }} Con questa piccola guida introdurremo le **Notification API** che permettono di interagire ed integrare la nostra web-application con il desktop del visitatore.+{{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. 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.+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//. 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//.
Line 11: Line 11:
 Ma vediamola in azione... Ma vediamola in azione...
  
-===== In action =====+===== Hello, World! =====
  
-==== Hello, World! ==== +Entrambe le specifiche utilizzano l'oggetto/costruttore ''Notification'' per inviare la notifica al visitatore. Ecco un esempio:
- +
-Entrambe le specifiche utilizzano l'oggetto/costruttore ''Notification'' per inviare la notifica al visitatore. Un esempio base da utilizzare nei nostri script può essere:+
  
 <code javascript> <code javascript>
Line 21: Line 19:
 </code> </code>
  
-==== Chiediamo il permesso ====+===== 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: 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:
Line 41: Line 39:
 In questo modo comparirà una pop-up sul browser per chiedere all'utente se vuole ricevere una notifica dalla pagina web. In questo modo comparirà una pop-up sul browser per chiedere all'utente se vuole ricevere una notifica dalla pagina web.
  
-==== Le opzioni ====+===== Le opzioni a disposizione =====
  
-Le **Notification API** mette a disposizione diverse proprietà che arricchiscono l'esperienza utente. Quelle maggiormente supportate sono:+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.title'' | Il titolo della notifica |
Line 53: Line 51:
 ^ ''Notification.data''  | Ritorna l'oggeto della notifica | ^ ''Notification.data''  | Ritorna l'oggeto della notifica |
  
-Se ad esempio volessimo inviare una notifica più strutturata basterà utilizzare una delle proprietà sopracitate:+Se ad esempio volessimo inviare una notifica più strutturata basterà utilizzare una delle proprietà sopracitate da passare al costruttore:
  
 <code javascript> <code javascript>
-new Notification('Titolo della notifica', { body: 'Corpo della notifica', 'icon': 'http://example.org/icon.png' });+new Notification('Titolo della notifica', { 
 +  'body: 'Corpo della notifica', 
 +  'icon' : 'http://example.org/icon.png' 
 +});
 </code> </code>
  
- +===== Mettiamo in pratica quello che abbiamo imparato =====
- +
-==== Mettiamo in pratica quello che abbiamo imparato ====+
  
 Un esempio completo di tutto quello che abbiamo imparato, può essere: Un esempio completo di tutto quello che abbiamo imparato, può essere:
  
-<code javascript>+<file javascript notify.js>
 function notify(title, options) { function notify(title, options) {
  
Line 90: Line 89:
  
 } }
-</code>+</file> 
 + 
 +Possiamo ad esempio richiamare questa funzione JS semplicemente cliccando su un bottone:
  
 <code html5> <code html5>
-<button onclick="notify('Hello, World!', { body: 'Questa è la mia prima notifica' })">Invia notifica</button>+<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> </code>
  
Line 123: Line 124:
 } }
 </script> </script>
-<button onclick="notify('Hello, World!', { body: 'Questa è la mia prima notifica' })">Invia notifica</button>+ 
 +<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> </html>
Line 129: Line 134:
 ===== Supporto nei browser ===== ===== Supporto nei browser =====
  
-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//).+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 ==== ===== Ulteriori informazioni ====
  • programming/js-notification-api.1435074295.txt.gz
  • Last modified: 7 years ago
  • by Giuseppe Di Terlizzi