aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/notification/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/api/notification/index.html')
-rw-r--r--files/es/web/api/notification/index.html430
1 files changed, 430 insertions, 0 deletions
diff --git a/files/es/web/api/notification/index.html b/files/es/web/api/notification/index.html
new file mode 100644
index 0000000000..a673bc5739
--- /dev/null
+++ b/files/es/web/api/notification/index.html
@@ -0,0 +1,430 @@
+---
+title: Notification
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<div>{{APIRef("Web Notifications")}}</div>
+
+<div></div>
+
+<p>La interfaz <code>Notification</code> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a> se usa para configurar y mostrar notificaciones de escritorio al usuario. La apariencia y las funcionalidad especificas de esta notificacion varia a traves de las distintas plataformas, pero generalmente esta plataformas proveen un camino para proveer informacion al usuario de manera asincronica.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Crea una nueva instancia del objecto <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<h3 id="Propiedades_Estáticas">Propiedades Estáticas</h3>
+
+<p>Estas propiedades solo estan disponibles en el objecto <code>Notification</code> en sí mismo.</p>
+
+
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Una cadena que representa el permiso actual para mostrar notificaciones. Los valores posibles son:</dd>
+</dl>
+
+
+
+<ul>
+ <li><code>denied</code> (El usuario rechaza que las notificaciones sean mostradas).</li>
+ <li><code>granted</code> (El usuario acepta que las notificaciones sean mostradas).</li>
+ <li><code>default</code> (La elección del usuario es desconocida por lo tanto el navegador actuará como si el valor fuese denied).</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Propiedades_de_Instancia">Propiedades de Instancia</h3>
+
+<p>Estas propiedades solo están disponibles en instancias del objecto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Arreglo de acciones de la notificación, como se especifica en el parámetro de opciones del constructor.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>URL de la imagen usada para representar la notificación cuando no hay espacio suficiente para mostrarla.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>El título de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>La dirección del texto de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>El código del lenguaje de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>The body string de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>El ID de la notificación (si hay) como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>La URL de la imagen usada como ícono de la notificación como está especificado en el parámetro options del constructor.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>URL de una imagen para mostrar como parte de la notificación, al igual que se especifica en el parámetro de opciones del constructor.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Retorna <span id="result_box" lang="es"><span>un clon</span> <span>estructurado de los</span> <span>datos de la notificación</span><span>.</span></span></dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} indicando en dispositivos pantallas lo suficientemente grandes, una notificación debería permanecer activa hasta que el usuario haga click o la descarte.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Especifica si la notificación debería ser silenciada, por ejemplo sin generar sonidos o vibraciones, <span id="result_box" lang="es"><span>independientemente de</span> <span>la configuración del dispositivo</span><span>.</span></span></dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Especifica el tiempo en la cual una notificación fué creada o aplicable (pasado, presente o futuro).</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Especifica un patrón de vibración para dispositivos que disponen de hardware para emitirlo. </dd>
+</dl>
+
+<h4 id="Propiedades_no_soportadas">Propiedades no soportadas</h4>
+
+<p>Las siguientes propiedades están listadas en las especificaciones más actualizadas, pero aún no están soportadas por los navegadores. Es aconsejable verificarlas regularmente para ver si el estado de ellas ha sido actualizado, y háganos saber si encuentra información desactualizada.</p>
+
+<dl>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>Specifies whether the notification firing should enable the device's screen or not.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="es"><span>Especifica si se debe notificar al usuario después de que una notificación nueva reemplace a una anterior.</span></span></dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="es"><span>Especifica un recurso de sonido para reproducir cuando se activa la notificación, en lugar del sonido de notificación del sistema predeterminado.</span></span></dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="tts_button"><span id="result_box" lang="es"><span>Especifica si la notificación debe ser 'fija', es decir, no fácilmente eliminable por el usuario.</span></span></div>
+ </dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>
+ <div><span id="result_box" lang="es"><span>Especifica un patrón de vibración para los dispositivos con hardware de </span></span><span id="result_box" lang="es"><span class="alt-edited">vibraciones para emitir.</span></span></div>
+ </dd>
+</dl>
+
+<h4 id="Manejador_de_Eventos(Event_Handler)">Manejador de Eventos(Event Handler)</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Un manejador para el {{event("click")}} event. Sera inicializado cada vez que el usuario de click en la notificacion.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</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>
+ <dt>
+ <h2 id="Methods">Methods</h2>
+
+ <h3 id="Static_methods">Static methods</h3>
+ <span id="result_box" lang="es"><span>Estos métodos están disponibles solo en el objeto de </span></span><code>Notificación</code><span lang="es"><span> en sí.</span></span></dt>
+ <dd></dd>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Solicita permiso del usuario para mostrar notificaciones.</span></span></dd>
+ <dt>
+ <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="https://developer.mozilla.org/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>
+ </dt>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programmatically closes a notification.</dd>
+ <dt>
+ <h2 id="Example">Example</h2>
+
+ <p>Assume this basic HTML:</p>
+
+ <pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>notifyMe()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Notify me!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></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 line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">notifyMe</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token">// Let's check if the browser supports notifications</span>
+ <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="string token">"Notification"</span> <span class="keyword token">in</span> window<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"This browser does not support desktop notification"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+
+ <span class="comment token">// Let's check whether notification permissions have already been granted</span>
+ <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token">// If it's okay let's create a notification</span>
+ <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+
+ <span class="comment token">// Otherwise, we need to ask the user for permission</span>
+ <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">!==</span> <span class="string token">'denied'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>permission<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token">// If the user accepts, let's create a notification</span>
+ <span class="keyword token">if</span> <span class="punctuation token">(</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+ <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+
+ <span class="comment token">// At last, if the user has denied notifications, and you </span>
+ <span class="comment token">// want to be respectful there is no need to bother them any more.</span>
+<span class="punctuation token">}</span></code></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 line-numbers language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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 line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">spawnNotification</span><span class="punctuation token">(</span>theBody<span class="punctuation token">,</span>theIcon<span class="punctuation token">,</span>theTitle<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">var</span> options <span class="operator token">=</span> <span class="punctuation token">{</span>
+ body<span class="punctuation token">:</span> theBody<span class="punctuation token">,</span>
+ icon<span class="punctuation token">:</span> theIcon
+ <span class="punctuation token">}</span>
+ <span class="keyword token">var</span> n <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span>theTitle<span class="punctuation token">,</span>options<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></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>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>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>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>{{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>{{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>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>sound</code></td>
+ <td>{{CompatVersionUnknown}}</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>{{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>{{CompatGeckoDesktop("47.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</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>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>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>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>{{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>{{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>{{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>{{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>{{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>{{CompatGeckoMobile("47.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</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>
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt>
+</dl>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-06 23:21:16 +0000