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:48] – Giuseppe Di Terlizziprogramming:js-notification-api [2015/06/23 18:03] (current) – [Mettiamo in pratica quello che abbiamo imparato] Giuseppe Di Terlizzi
Line 5: Line 5:
 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 13: Line 13:
 ===== Hello, World! ===== ===== Hello, World! =====
  
-Entrambe le specifiche utilizzano l'oggetto/costruttore ''Notification'' per inviare la notifica al visitatore. Un esempio base da utilizzare nei nostri script può essere:+Entrambe le specifiche utilizzano l'oggetto/costruttore ''Notification'' per inviare la notifica al visitatore. Ecco un esempio:
  
 <code javascript> <code javascript>
Line 41: Line 41:
 ===== Le opzioni a disposizione ===== ===== 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 54: Line 54:
  
 <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 =====
Line 93: Line 94:
  
 <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 124: Line 125:
 </script> </script>
  
-<p>Prova: <button onclick="notify('Hello, World!', { body: 'Questa è la mia prima notifica' })">Invia notifica</button></p>+<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 130: 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.1435074506.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi