Both sides previous revision Previous revision Next revision | Previous revision |
programming:js-notification-api [2015/06/23 17:44] – Giuseppe Di Terlizzi | programming:js-notification-api [2015/06/23 18:03] (current) – [Mettiamo in pratica quello che abbiamo imparato] Giuseppe Di Terlizzi |
---|
====== 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//. |
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 di base da utilizzare nei nostri script può essere: | |
| |
<code javascript> | <code javascript> |
</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: |
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 | |
^ ''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) { |
| |
| |
} | } |
</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> |
| |
} | } |
</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> |
===== 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 ==== |