---
title: Notifiche
slug: Web/API/notifiche
translation_of: Web/API/Notification
---
<p>{{APIRef("Web Notifications")}}</p>

<p>L'interfaccia <code>Notification</code> di <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> viene usata per configurare e mostrare le notifiche desktop all'utente.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Costruttore">Costruttore</h2>

<dl>
 <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
 <dd>Crea una nuova istanza dell'oggetto <code>Notification</code>.</dd>
</dl>

<h2 id="Proprietà">Proprietà</h2>

<h3 id="Proprietà_Static">Proprietà Static</h3>

<p>Queste proprietà sono disponibili solo sull'oggetto <code>Notification</code> stesso.</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: <code>denied</code> (l'utente rifiuta la ricezione delle notifiche), <code>granted</code> (l'utente accetta la ricezione delle notifiche), o <code>default</code> (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).</dd>
</dl>

<h3 id="Proprietà_Instance">Proprietà Instance</h3>

<p>Queste proprietà sono disponibili solo su istanze dell'oggetto <code>Notification</code>.</p>

<dl>
 <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
 <dd>L'array di azioni della notifica come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
 <dd>L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.</dd>
 <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
 <dd>La stringa del corpo della notifica come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
 <dd>Restituisce un clone strutturato dei dati della notifica.</dd>
 <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
 <dd>La direzione del testo della notifica come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
 <dd>Il codice della lingua della notifica come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
 <dd>L'ID della notifica (se presente) come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
 <dd>L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
 <dd>L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.</dd>
 <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
 <dd>Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.</dd>
 <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
 <dd>Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.</dd>
 <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
 <dd>Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).</dd>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
 <dd>Il titolo della notifica come specificato nel primo parametro del costruttore.</dd>
 <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
 <dd>Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.</dd>
</dl>

<h4 id="Proprietà_non_supportate">Proprietà non supportate</h4>

<p>Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.</p>

<dl>
 <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
 <dd>Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.</dd>
 <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
 <dd>Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.</dd>
 <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
 <dd>Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.</dd>
 <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
 <dd>Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.</dd>
</dl>

<h4 id="Gestori_di_eventi">Gestori di eventi</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.</dd>
</dl>

<h4 id="Obsolete_handlers">Obsolete handlers</h4>

<p>The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p>

<dl>
 <dt>{{domxref("Notification.onclose")}}</dt>
 <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
 <dt>{{domxref("Notification.onshow")}}</dt>
 <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<h3 id="Static_methods">Static methods</h3>

<p>These methods are available only on the <code>Notification</code> object itself.</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>Requests permission from the user to display notifications.</dd>
</dl>

<h3 id="Instance_methods">Instance methods</h3>

<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>Programmatically closes a notification.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>Assume this basic HTML:</p>

<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>

<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p>

<pre class="brush: js">function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them any more.
}</pre>

<p>{{EmbedLiveSample('Example', '100%', 30)}}</p>

<p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p>

<pre class="brush: js">Notification.requestPermission().then(function(result) {
  console.log(result);
});</pre>

<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p>

<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) {
  var options = {
      body: theBody,
      icon: theIcon
  }
  var n = new Notification(theTitle,options);
}</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Notifications')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Living standard</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>6<sup>[3]</sup></td>
  </tr>
  <tr>
   <td><code>icon</code></td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>{{CompatUnknown}}</td>
   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("41.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>silent</code></td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>noscreen</code>, <code>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sound</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>renotify</code></td>
   <td>{{CompatChrome(50.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>Notification.requestPermission()</code></td>
   <td>{{CompatChrome(46.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("47.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(40)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>vibrate</code>, <code>actions</code></td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatOpera(39)}}</td>
   <td> </td>
  </tr>
  <tr>
   <td><code>badge</code></td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatOpera(39)}}</td>
   <td> </td>
  </tr>
  <tr>
   <td><code>image</code></td>
   <td>{{CompatChrome(55.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>
    <p>{{CompatVersionUnknown}}</p>
   </td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
    1.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>
    <p>{{CompatVersionUnknown}}</p>
   </td>
  </tr>
  <tr>
   <td><code>icon</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
    1.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("41.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>silent</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
  </tr>
  <tr>
   <td><code>noscreen</code>, <code>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sound</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>renotify</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(50.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>Notification.requestPermission()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("47.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>vibrate</code>, <code>actions</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td> </td>
   <td>{{CompatChrome(53.0)}}</td>
  </tr>
  <tr>
   <td><code>badge</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td> </td>
   <td>{{CompatChrome(53.0)}}</td>
  </tr>
  <tr>
   <td><code>image</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td>{{CompatChrome(55.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>

<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>

<p>Before Chrome 42, service worker additions were not supported.</p>

<p>Starting in Chrome 49, notifications do not work in incognito mode.</p>

<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>

<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>

<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p>

<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>

<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>

<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
</ul>