diff options
Diffstat (limited to 'files/es/web/api/notification')
-rw-r--r-- | files/es/web/api/notification/body/index.html | 63 | ||||
-rw-r--r-- | files/es/web/api/notification/dir/index.html | 59 | ||||
-rw-r--r-- | files/es/web/api/notification/icon/index.html | 58 | ||||
-rw-r--r-- | files/es/web/api/notification/index.html | 430 | ||||
-rw-r--r-- | files/es/web/api/notification/onclick/index.html | 61 | ||||
-rw-r--r-- | files/es/web/api/notification/permission/index.html | 191 | ||||
-rw-r--r-- | files/es/web/api/notification/requestpermission/index.html | 143 |
7 files changed, 1005 insertions, 0 deletions
diff --git a/files/es/web/api/notification/body/index.html b/files/es/web/api/notification/body/index.html new file mode 100644 index 0000000000..46c3209386 --- /dev/null +++ b/files/es/web/api/notification/body/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.body +slug: Web/API/notification/body +tags: + - API + - API Notificaciones + - Javascript Notificador + - Notificaciones +translation_of: Web/API/Notification/body +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Summary" name="Summary">Resumen </h2> + +<p>El <font face="Consolas, Monaco, Andale Mono, monospace">body es la </font> propiedad que representa el contenido de la notificacion.</p> + +<p>Los valores por esta propiedad son enviandos durante la <span style="line-height: 23.3333339691162px;">instanciación de </span>{{domxref("Notification")}} definiendo la propiedad body en el objeto de las opciones pasa al {{domxref("Notification")}} constructor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">var <em>body</em> = <em>instanceOfNotification</em>.body; +</pre> + +<h3 id="Return_Value" name="Return_Value">Tipo</h3> + +<p>String.</p> + +<h2 id="Especificaciones"><span style="font-family: 'Open Sans Light', sans-serif; font-weight: bold; line-height: 23.3333339691162px; background-color: rgba(212, 221, 228, 0.498039);">Especificaciones</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span style="font-family: 'Open Sans Light', sans-serif; font-weight: bold; line-height: 23.3333339691162px; background-color: rgba(212, 221, 228, 0.498039);">Especificacion</span></th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</td> + </tr> + <tr> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li> +</ul> diff --git a/files/es/web/api/notification/dir/index.html b/files/es/web/api/notification/dir/index.html new file mode 100644 index 0000000000..35f58dfca7 --- /dev/null +++ b/files/es/web/api/notification/dir/index.html @@ -0,0 +1,59 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +translation_of: Web/API/Notification/dir +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><span style="line-height: 23.3333339691162px;">La propiedad dir indica la direccion para el lenguaje a usar </span><span style="line-height: 23.3333339691162px;">dentro de la notificación</span>.</p> + +<p>El valor por esta propiedad es envianda durante la instanciancion de <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}} </span>mediante la definición de la propiedad dir el objeto de las opciones pasa al {{domxref ("Notificación")}} constructor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">var <em>direction</em> = <em>instanceOfNotification</em>.dir; +</pre> + +<h3 id="Return_Value" name="Return_Value">Tipo</h3> + +<p>String <span style="line-height: 23.3333339691162px;">representa la actual direccion</span>. puede ser: </p> + +<ul> + <li><code>auto</code>: La direccion es definida automaticamente.</li> + <li><code>ltr</code>: <span style="line-height: 23.3333339691162px;">El texto es desplegado de izquierda a derecha</span>.</li> + <li><code>rtl</code>: <span style="line-height: 23.3333339691162px;">El texto es desplegado de derecha a izquierda</span>.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li> +</ul> diff --git a/files/es/web/api/notification/icon/index.html b/files/es/web/api/notification/icon/index.html new file mode 100644 index 0000000000..deb7c0606e --- /dev/null +++ b/files/es/web/api/notification/icon/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +translation_of: Web/API/Notification/icon +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><span style="line-height: 23.3333339691162px;">La propiedad icon indica la URL del icono a usar dentro de la notificacion</span>.</p> + +<p>El valor para esta propiedad es enviada durante la instanciacion <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}} definiendo la propiedad icon el objeto pasa al </span> <span style="line-height: 23.3333339691162px;">{{domxref("Notification")}} constructor.</span></p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">var <em>icon</em> = <em>instanceOfNotification</em>.icon; +</pre> + +<h3 id="Return_Value" name="Return_Value">Tipo</h3> + +<p>String que representa una URL válida.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</td> + </tr> + <tr> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li> +</ul> 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"><</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">></span></span>Notify me!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></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 <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 <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 <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> diff --git a/files/es/web/api/notification/onclick/index.html b/files/es/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..211947a1b8 --- /dev/null +++ b/files/es/web/api/notification/onclick/index.html @@ -0,0 +1,61 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - API + - DOM + - Notifications + - Propiedad + - Referencia + - onclick +translation_of: Web/API/Notification/onclick +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>La propiedad <code>onclick</code> de la interfaz {{domxref("Notification")}} especifica un event listener para recibir eventos {{event("click")}}. Estos eventos ocurren cuando el usuario hace un click sobre el {{domxref("Notification")}} mostrado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">Notification.onclick = function(event) { ... }; +</pre> + +<p>El comportamiento por defecto es mover el foco al viewport del <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">sitio de contexto</a> de dicha notificación. Si no deseas este comportamiento, puedes llamar <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> en el objeto del evento.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En el siguiente ejemplo, utilizamos un manejador <code>onclick</code> para abrir un sitio web en una nueva pestaña (especificado con la inclusión del parámetro <code>'_blank'</code>) una vez que la notifación es cliqueada.</p> + +<pre class="brush: js">notification.onclick = function(event) { + event.preventDefault(); // Previene al buscador de mover el foco a la pestaña del Notification + window.open('http://www.mozilla.org', '_blank'); +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando la API de Notifications</a></li> +</ul> diff --git a/files/es/web/api/notification/permission/index.html b/files/es/web/api/notification/permission/index.html new file mode 100644 index 0000000000..d528e2f9e0 --- /dev/null +++ b/files/es/web/api/notification/permission/index.html @@ -0,0 +1,191 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +translation_of: Web/API/Notification/permission +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>La propiedad <code>permission</code> es una propiedad de sólo lectura de la interfaz {{domxref("Notification")}}. Esta propiedad indica el permiso concedido por el usuario para mostrar notificaciones.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">var <em>permission</em> = Notification.permission;</pre> + +<h3 id="Return_Value" name="Return_Value">Valor</h3> + +<p>Una {{domxref("DOMString")}} que representa el permiso actual. El valor puede ser:</p> + +<ul> + <li><code>granted</code>: El usuario ha concedido el permiso explicitamente al origen actual para mostrar notificaciones del sistema.</li> + <li><code>denied</code>: El usuario ha denegado el permiso explicitamente al origen actual para mostrar notificaciones del sistema.</li> + <li> + <p><code>default</code>: La decisión del usuario es deconocida; en este caso la aplicación actuará como si el permiso fuese <code>denied</code></p> + </li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Podríamos usar el próximo fragmento para:</p> + +<ol> + <li>Comprobar si las notificaciones están soportadas</li> + <li>Comprobar si el permiso ha sido concedido para el origen actual + <ol> + <li>Si ha sido concedido, lanzar la notificación</li> + <li>Si no ha sido concedido, pedir el permiso</li> + <li>Si se concede, lanzar la notificación</li> + </ol> + </li> +</ol> + +<pre class="brush: js">function notifyMe() { + // Comprobamos si el navegador soporta las notificaciones + if (!("Notification" in window)) { + console.log("Este navegador no es compatible con las notificaciones de escritorio"); + } + + // Comprobamos si los permisos han sido concedidos anteriormente + else if (Notification.permission === "granted") { + // Si es correcto, lanzamos una notificación + var notification = new Notification("Hola!"); + } + + // Si no, pedimos permiso para la notificación + else if (Notification.permission !== 'denied' || Notification.permission === "default") { + Notification.requestPermission(function (permission) { + // Si el usuario nos lo concede, creamos la notificación + if (permission === "granted") { + var notification = new Notification("Hola!"); + } + }); + } + + // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo. +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5 {{ property_prefix("webkit") }} (see notes)<br> + 22</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.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>Característica</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>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_de_Firefox_OS">Notas de Firefox OS</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Notas_de_Chrome">Notas de Chrome</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Notas_de_Safari">Notas de Safari</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/API/Notifications_API/Usando_la_API_de_Notificaciones">Usando la API de Notificaciones</a></li> + <li>{{domxref("Permissions_API","Permissions API")}}</li> +</ul> diff --git a/files/es/web/api/notification/requestpermission/index.html b/files/es/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..6c4b8080b3 --- /dev/null +++ b/files/es/web/api/notification/requestpermission/index.html @@ -0,0 +1,143 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +translation_of: Web/API/Notification/requestPermission +--- +<p>{{APIRef("Web Notifications")}}</p> + +<p>El método <strong><code>requestPermission()</code></strong> de la interfaz {{domxref("Notification")}} realiza una petición de permiso al usuario para que en ese <a href="https://es.wikipedia.org/wiki/Dominio_de_Internet">dominio web</a> se puedan mostrar notificaciones. </p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La ultima especificación ha actualizado este método a una sintaxis basada en <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>:</p> + +<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre> + +<p>Anteriormente, la sintaxis se basaba en una simple retrollamada (callback); esta especificación ahora está obsoleta.</p> + +<pre class="brush: js">Notification.requestPermission(<em>callback</em>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt> + <dd>Una retrollamada (callback) opcional que es ejecutado con el valor del permiso elegido por el usuario. Obsoleto y reemplazado por el valor de retorno de <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>.</dd> +</dl> + +<h3 id="Retorno">Retorno</h3> + +<p>Devuleve un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> que se transforma a <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString">DOMString</a></code> con el permiso escogido por el usuario. Los valores posibles para este son <code>granted</code>, <code>denied</code>, ó <code>default</code>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>El siguiente fragmento realiza la petición de permiso al usuario, después registra un resultado diferente dependiendo de la elección del usuario.</p> + +<pre class="brush: js">Notification.requestPermission(<span class="s1">function</span>(result) { + <span class="s1">if</span> (result === <span class="s2">'denied'</span>) { +<span class="s3"> console.log(</span>'Permission wasn\'t granted. Allow a retry.'<span class="s3">);</span> + <span class="s1">return</span>; + } else if (result === 'default') { + console.log('The permission request was dismissed.'); + return; + } + // Hacer algo con el permiso concedido. +});</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_buscadores">Compatibilidad con los buscadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5 {{ property_prefix("webkit") }} (ver notas)<br> + 22</td> + <td>4.0 {{ property_prefix("moz") }} (ver notas)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (ver notas)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</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>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>4.0 {{ property_prefix("moz") }} (ver notas)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (ver notas)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_de_Firefox_OS">Notas de Firefox OS</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Notas_de_Chrome">Notas de Chrome</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Notas_de_Safari">Notas de Safari</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando la API de notificaciones</a></li> +</ul> |