Close #4068 patch update using the notifications api [es] (#4075)

* 4068-patch-update-using_the_notifications_api-es

* 4068-patch-update-using_the_notifications_api-es

* Update files/es/web/api/notifications_api/using_the_notifications_api/index.md

typo

* Apply suggestions from code review

typos

Co-authored-by: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com>

* Update files/es/web/api/notifications_api/using_the_notifications_api/index.md

typo

Co-authored-by: David Brito <39559632+davbrito@users.noreply.github.com>

Co-authored-by: GrayWolf <a13x.graywolf@gmail.com>
Co-authored-by: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com>
Co-authored-by: David Brito <39559632+davbrito@users.noreply.github.com>

2 files changed, 268 insertions, 295 deletions

diff --git a/files/es/web/api/notifications_api/using_the_notifications_api/index.html b/files/es/web/api/notifications_api/using_the_notifications_api/index.html
deleted file mode 100644
index 1e0a516ab3..0000000000
--- a/files/es/web/api/notifications_api/using_the_notifications_api/index.html
+++ /dev/null
@@ -1,295 +0,0 @@
----
-title: Usando la API de Notificaciones
-slug: Web/API/Notifications_API/Using_the_Notifications_API
-tags:
-  - API
-  - Notificaciones
-  - Tutorial
-translation_of: Web/API/Notifications_API/Using_the_Notifications_API
-original_slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones
----
-<p>{{APIRef("Web Notifications")}}</p>
-
-<p class="summary">La <a href="/en-US/docs/Web/API/Notifications_API">API de Notificaciones</a> permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<p>Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"><img alt="" src="https://mdn.mozillademos.org/files/10961/mac-notification.png" style="display: block; height: 97px; margin: 0px auto; width: 358px;"></p>
-
-<p>El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.</p>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<div class="column-container">
-<div class="column-half">
-<p>Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en <a href="https://slack.com/">Slack</a>.</p>
-
-<p>Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:</p>
-
-<ul>
- <li><strong>Lista de pendientes</strong>: Esto es una app sencilla que almacena las tareas pendientes localmente usando <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Descarga el código</a>, o echa un vistazo al <a href="http://mdn.github.io/to-do-notifications/">ejemplo en tiempo real</a>.</li>
- <li><strong>Emogotchi</strong>: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. <a href="https://github.com/mdn/emogotchi">Descarga el código de Emogotchi</a>, o echa un vistazo a la <a href="http://mdn.github.io/emogotchi/">versión en tiempo real</a>.</li>
-</ul>
-</div>
-
-<div class="column-half">
-<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/10963/emogotchi.png" style="max-width: 300px; width: 70%;">.</p>
-</div>
-</div>
-
-<h2 id="Pidiendo_permiso">Pidiendo permiso</h2>
-
-<p>Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.</p>
-
-<h3 id="Comprobando_el_permiso_actual">Comprobando el permiso actual</h3>
-
-<p>Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:</p>
-
-<dl>
- <dt><code>default</code></dt>
- <dd>No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.</dd>
- <dt><code>granted</code></dt>
- <dd>El usuario ha permitido las notificaciones de la app.</dd>
- <dt><code>denied</code></dt>
- <dd>El usuario ha denegado las notificaciones de la app.</dd>
-</dl>
-
-<h3 id="Obteniendo_permiso">Obteniendo permiso</h3>
-
-<p>Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la <a href="http://mdn.github.io/emogotchi/">Demo de Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">código fuente</a>), solo tenemos que incluir lo siguiente:</p>
-
-<pre class="brush: js">Notification.requestPermission().then(function(result) {
-  console.log(result);
-});</pre>
-
-<p>Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:</p>
-
-<pre class="brush: js">Notification.requestPermission();</pre>
-
-<p>La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo <code>else ... if</code> abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver <a href="https://github.com/mdn/to-do-notifications/blob/gh-pages/scripts/todo.js#L305-L344">To-do List Notifications</a>):</p>
-
-<pre class="brush: js">function notifyMe() {
-  // Comprobamos si el navegador soporta las notificaciones
-  if (!("Notification" in window)) {
-    alert("Este navegador no soporta las notificaciones del sistema");
-  }
-
-  // Comprobamos si ya nos habían dado permiso
-  else if (Notification.permission === "granted") {
-    // Si esta correcto lanzamos la notificación
-    var notification = new Notification("Holiwis :D");
-  }
-
-  // Si no, tendremos que pedir permiso al usuario
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // Si el usuario acepta, lanzamos la notificación
-      if (permission === "granted") {
-        var notification = new Notification("Gracias majo!");
-      }
-    });
-  }
-
-  // Finalmente, si el usuario te ha denegado el permiso y
-  // quieres ser respetuoso no hay necesidad molestar más.
-}</pre>
-
-<div class="note">
-<p><strong>Nota:</strong> Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos <code>load</code> (ver <a href="https://code.google.com/p/chromium/issues/detail?id=274284">problema 274284</a>).</p>
-</div>
-
-<h3 id="Permisos_en_Firefox_OS_manifest">Permisos en Firefox OS manifest</h3>
-
-<p>Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo <code>manifest.webapp</code> cuando vayas a usarlo en una app en Firefox OS:</p>
-
-<pre>"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-},
-"messages": [{"notification": "path/to/your/index.html"}]
-
-</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.</p>
-</div>
-
-<h2 id="Creando_una_notificación">Creando una notificación</h2>
-
-<p>Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.</p>
-
-<p>Por ejemplo, en el <a href="https://github.com/mdn/emogotchi/blob/master/main.js#L109-L127">Ejemplo de Emogotchi</a> tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:</p>
-
-<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) {
-  var options = {
-      body: theBody,
-      icon: theIcon
-  }
-  var n = new Notification(theTitle,options);
-  setTimeout(n.close.bind(n), 5000);
-}
-
-function randomNotification() {
-  var randomQuote = quoteChooser();
-  var options = {
-      body: randomQuote,
-      icon: 'img/sad_head.png',
-  }
-
-  var n = new Notification('Emogotchi says',options);
-  setTimeout(n.close.bind(n), 5000);
-}</pre>
-
-<h2 id="Cerrando_las_notificaciones">Cerrando las notificaciones</h2>
-
-<p>Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> para asegurarnos de que la función <code>close()</code> está asociada a la notificación.</p>
-
-<pre class="brush: js">setTimeout(n.close.bind(n), 5000);
-</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".</p>
-</div>
-
-<h2 id="Eventos_de_Notificación">Eventos de Notificación</h2>
-
-<p>Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:</p>
-
-<dl>
- <dt>{{event("click")}}</dt>
- <dd>Lanzado cuando el usuario hace click en la notificación.</dd>
- <dt>{{event("error")}}</dt>
- <dd>Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.</dd>
-</dl>
-
-<p>Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.</p>
-
-<p>También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:</p>
-
-<dl>
- <dt>{{event("close")}}</dt>
- <dd>Lanzado cuándo la notificación se cierra.</dd>
- <dt>{{event("show")}}</dt>
- <dd>Lanzado cuándo la notificación se muestra al usuario.</dd>
-</dl>
-
-<h2 id="Reemplazando_notificaciones_existentes">Reemplazando notificaciones existentes</h2>
-
-<p>Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.</p>
-
-<p>Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.</p>
-
-<h3 id="Ejemplo_de_etiquta">Ejemplo de etiquta</h3>
-
-<p>Teniendo el siguiente código HTML:</p>
-
-<pre class="brush: html">&lt;button&gt;Notifícame!&lt;/button&gt;</pre>
-
-<p>Es posible controlar múltiples notificaciones de la siguiente forma:</p>
-
-<pre class="brush: js">window.addEventListener('load', function () {
-  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
-  // Si no lo tenemos, lo pedimos
-  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si el usuario ha dado permiso
-    // le intentamos enviar 10 notificaciones
-    if (window.Notification &amp;&amp; Notification.permission === "granted") {
-      var i = 0;
-      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-      var interval = window.setInterval(function () {
-        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
-        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-        if (i++ == 9) {
-          window.clearInterval(interval);
-        }
-      }, 200);
-    }
-
-    // Si el usuario no ha dicho si quiere notificaciones
-    // Nota: en Chrome no estamos seguros de si la propiedad permission
-    // esta asignada, por lo que es inseguro comprobar el valor "default".
-    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        // Si el usuario acepta
-        if (status === "granted") {
-          var i = 0;
-          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-          var interval = window.setInterval(function () {
-          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-            if (i++ == 9) {
-              window.clearInterval(interval);
-            }
-          }, 200);
-        }
-
-        // Otherwise, we can fallback to a regular modal alert
-        else {
-          alert("Hi!");
-        }
-      });
-    }
-
-    // If the user refuses to get notified
-    else {
-      // We can fallback to a regular modal alert
-      alert("Hi!");
-    }
-  });
-});</pre>
-
-<p>Comprueba el ejemplo en directo abajo:</p>
-
-<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
-
-<h2 id="Receiving_notification_of_clicks_on_app_notifications">Receiving notification of clicks on app notifications</h2>
-
-<p>When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:</p>
-
-<ol>
- <li>A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.</li>
- <li>A <a href="/en-US/docs/Web/API/Navigator/mozSetMessageHandler">system message</a> otherwise.</li>
-</ol>
-
-<p>See <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">this code snippet</a> for an example of how to deal with this.</p>
-
-<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_de_navegadores">Compatibilidad de navegadores</h2>
-
-<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="/en-US/Apps/Build/User_notifications">User notifications reference</a></li>
- <li><a href="/en-US/Apps/Build/User_notifications/Notifying_users_via_the_Notification_and_Vibration">Notifying users via the Notification and Vibration APIs</a></li>
- <li>{{ domxref("Notification") }}</li>
-</ul>
diff --git a/files/es/web/api/notifications_api/using_the_notifications_api/index.md b/files/es/web/api/notifications_api/using_the_notifications_api/index.md
new file mode 100644
index 0000000000..7f94ed80ed
--- /dev/null
+++ b/files/es/web/api/notifications_api/using_the_notifications_api/index.md
@@ -0,0 +1,268 @@
+---
+title: Usando la API de Notificaciones
+slug: Web/API/Notifications_API/Using_the_Notifications_API
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+original_slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones
+---
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
+
+La [API de notificaciones](/es/docs/Web/API/Notifications_API) permite que una página web o aplicación envíe notificaciones que se muestran fuera de la página a nivel del sistema; esto permite que las aplicaciones web envíen información a un usuario incluso si la aplicación está inactiva o en segundo plano. Este artículo analiza los aspectos básicos del uso de esta API en tus propias aplicaciones.
+
+Por lo general, las notificaciones del sistema se refieren al mecanismo de notificación estándar del sistema operativo: piense, por ejemplo, en cómo un sistema de escritorio típico o dispositivo móvil transmite notificaciones.
+
+![](android-notification.png)
+
+El sistema de notificación del sistema operativo variará, por supuesto, según la plataforma y el navegador, pero está bien, y la API de notificaciones está escrita para ser lo suficientemente general para la compatibilidad con la mayoría de los sistemas de notificación.
+
+## Ejemplos
+
+Uno de los casos de uso más obvios para las notificaciones web es una aplicación de correo o [IRC (Internet Relay Chat)](/es/docs/Glossary/IRC) basada en la web que necesita notificar al usuario cuando se recibe un mensaje nuevo, incluso si el usuario está haciendo otra cosa con otra aplicación. Ahora existen muchos ejemplos de esto, como [Slack](https://slack.com/).
+
+Hemos escrito un ejemplo del mundo real, una aplicación de lista de tareas, para dar una idea más clara de cómo se pueden usar las notificaciones web. Almacena datos localmente usando la [API IndexedDB](/es/docs/Web/API/IndexedDB_API) y notifica a los usuarios cuando vencen las tareas usando notificaciones del sistema. [Descargue el código de la lista de tareas](https://github.com/mdn/to-do-notifications/tree/gh-pages) o [vea la aplicación ejecutándose en vivo](https://mdn.github.io/to-do-notifications/).
+
+## Solicitando permisos
+
+Antes de que una aplicación pueda enviar una notificación, el usuario debe conceder a la aplicación el permiso de hacerlo. Este es un requisito común cuando una API intenta interactuar con algo fuera de una página web; al menos una vez, el usuario debe otorgar específicamente permiso a esa aplicación para presentar notificaciones, lo que le permite controlar qué aplicaciones/sitios pueden mostrar notificaciones.
+
+Debido a los abusos de las notificaciones automáticas en el pasado, los navegadores web y los desarrolladores han comenzado a implementar estrategias para ayudar a mitigar este problema. Solo debe solicitar el consentimiento para mostrar notificaciones en respuesta a un gesto del usuario (por ejemplo, hacer clic en un botón). Esta no es solo la mejor práctica: no debe molestar a los usuarios con notificaciones que no aceptaron, sino que, en el futuro, los navegadores rechazarán explícitamente las solicitudes de permiso de notificación que no se activen en respuesta a un gesto del usuario. Firefox ya lo está haciendo desde la versión 72, por ejemplo, y Safari lo ha hecho durante algún tiempo.
+
+Además, en Chrome y Firefox no puede solicitar notificaciones a menos que el sitio sea un contexto seguro (es decir, HTTPS), y ya no puede permitir que se soliciten permisos de notificación desde un {{htmlelement("iframe")}} de origen cruzado.
+
+### Comprobación del estado actual de los permisos
+
+Puede verificar si ya tiene permiso comprobando el valor de la propiedad de solo lectura {{domxref("Notification.permission")}}. Puede tener uno de tres valores posibles:
+
+- `default`
+  - : Todavía no se le ha pedido permiso al usuario, por lo que no se mostrarán las notificaciones.
+- `granted`
+  - : El usuario ha dado permiso para mostrar notificaciones, después de habérlo pedido previamente.
+- `denied`
+  - : El usuario ha rechazado explícitamente el permiso para mostrar notificaciones.
+
+### Obtener permisos
+
+Si aún no se ha otorgado el permiso para mostrar notificaciones, la aplicación debe usar el método {{domxref("Notification.requestPermission()")}} para solicitarlo al usuario. En su forma más simple, solo incluimos lo siguiente:
+
+```js
+Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+```
+
+Esto utiliza la versión basada en promesas del método. Si desea admitir versiones anteriores, es posible que deba usar la versión [_callback_](/es/docs/Glossary/Callback_function) anterior, que se ve así:
+
+```js
+Notification.requestPermission();
+```
+
+La versión _callback_ acepta opcionalmente una función _callback_ que se llama una vez que el usuario ha respondido a la solicitud de permisos de visualización.
+
+### Ejemplo
+
+En nuestro ejemplo de lista de tareas, incluimos un botón "Habilitar notificaciones" que, cuando se presiona, solicita permisos de notificación para la aplicación.
+
+```html
+<button id="enable">Habilitar notificaciones</button>
+```
+
+Al hacer clic, se llama a la función `askNotificationPermission()`:
+
+```js
+function askNotificationPermission() {
+  // función para pedir los permisos
+  function handlePermission(permission) {
+    // configura el botón para que se muestre u oculte, dependiendo de lo que
+    // responda el usuario
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
+
+  // Comprobemos si el navegador admite notificaciones.
+  if (!('Notification' in window)) {
+    console.log("Este navegador no admite notificaciones.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) => {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}
+```
+
+Mirando primero el segundo bloque principal, verá que primero verificamos si las notificaciones son compatibles. Si es así, realizamos una comprobación para ver si se admite la versión basada en promesas de `Notification.requestPermission()`. Si es así, ejecutamos la versión basada en promesas (compatible en todas partes excepto Safari), y si no, ejecutamos la versión anterior basada en _callback_ (que es compatible con Safari).
+
+Para evitar la duplicación de código, hemos almacenado algunos bits de código de mantenimiento dentro de la función `handlePermission()`, que es el primer bloque principal dentro de este fragmento. Aquí dentro, establecemos explícitamente el valor `Notification.permission` (algunas versiones antiguas de Chrome fallaron al hacer esto automáticamente), y mostramos u ocultamos el botón dependiendo de lo que el usuario eligió en el cuadro de diálogo de permiso. No queremos mostrarlo si ya se ha otorgado el permiso, pero si el usuario elige negar el permiso, queremos darle la oportunidad de cambiar de opinión más adelante.
+
+> **Nota:** Antes de la versión 37, Chrome no te permite llamar a {{domxref("Notification.requestPermission()")}} en el manejador de eventos de carga (consulta el [error 274284](https://code.google.com/p/chromium/issues/detail?id=274284)).
+
+### Función de detección de la promesa requestPermission()
+
+Arriba mencionamos que teníamos que verificar si el navegador es compatible con la versión basada en promesas de `Notification.requestPermission()`. Hicimos esto usando lo siguiente:
+
+```js
+function checkNotificationPromise() {
+  try {
+    Notification.requestPermission().then();
+  } catch(e) {
+    return false;
+  }
+
+  return true;
+}
+```
+    
+Básicamente tratamos de ver si el método `.then()` está disponible en `requestPermission()`. Si es así, continuamos y devolvemos `true`. Si falla, devolvemos `false` en el bloque `catch() {}`.
+
+## Crear una notificación
+
+Crear una notificación es fácil; solo usa el constructor {{domxref("Notification")}}. Este constructor espera un título para mostrar con la notificación y algunas opciones para mejorar la notificación, como {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body"," body")}}.
+
+Por ejemplo, en el ejemplo de la lista de tareas, usamos el siguiente fragmento para crear una notificación cuando sea necesario (que se encuentra dentro de la función `createNotification()`):
+
+```js
+var img = '/to-do-notifications/img/icon-128.png';
+var text = '¡OYE! Tu tarea "' + title + '" ahora está vencida.';
+var notification = new Notification('Lista de tareas', { body: text, icon: img });
+```
+
+## Cerrando notificaciones
+
+{{domxref("Notification.close","close()")}} es utilizado para eliminar una notificación que ya no es relevante para el usuario (por ejemplo, el usuario ya leyó la notificación en la página web, en el caso de una aplicación de mensajería , o la siguiente canción ya se está reproduciendo en una aplicación de música para notificar los cambios de canción). La mayoría de los navegadores modernos descartan las notificaciones automáticamente después de unos momentos (alrededor de cuatro segundos), pero esto no es algo que generalmente deba preocuparte, ya que depende del usuario y del [agente de usuario](/es/docs/Web/HTTP/Headers/User-Agent). El cierre también puede ocurrir a nivel del sistema operativo y los usuarios deben mantener el control de esto. Las versiones anteriores de Chrome no eliminaban las notificaciones automáticamente, por lo que puedes hacerlo después de un {{domxref("setTimeout()")}} solo para esas versiones antiguas para no eliminar las notificaciones de las bandejas de notificaciones en otros navegadores.
+
+```js
+var n = new Notification('Mi gran canción');
+document.addEventListener('visibilitychange', function() {
+  if (document.visibilityState === 'visible') {
+    // La pestaña se ha vuelto visible, así que borre la Notificación ahora
+    // obsoleta.
+    n.close();
+  }
+});
+```
+
+> **Nota:** Esta API no debe usarse solo para eliminar la notificación de la pantalla después de un tiempo fijo (en los navegadores modernos), ya que este método también eliminará la notificación de cualquier bandeja de notificaciones, evitando que los usuarios interactúen con ella después de que se mostró inicialmente.
+
+> **Nota:** Cuando recibe un evento de cierre, no hay garantía de que sea el usuario quien cerró la notificación. Esto está en línea con la especificación, que establece: "Cuando se cierra una notificación, ya sea por la plataforma de notificaciones o por el usuario, se deben ejecutar los pasos de cierre".
+
+## Eventos de notificación
+
+Hay cuatro eventos que se activan en la instancia {{domxref("Notification")}}:
+
+- `click`
+  - : Se activa cuando el usuario hace clic en la notificación.
+- `close`
+  - : Se activa una vez que se cierra la notificación.
+- `error`
+  - : Se activa si algo sale mal con la notificación; esto generalmente se debe a que la notificación no se pudo mostrar por algún motivo.
+- `show`
+  - : Se activa cuando la notificación se muestra al usuario.
+
+Estos eventos se pueden rastrear usando los manejadores {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror" ,"onerror")}} y {{domxref("Notification.onshow","onshow")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ellos.
+
+## Sustitución de notificaciones existentes
+
+Por lo general, no es deseable que un usuario reciba muchas notificaciones en un corto espacio de tiempo; por ejemplo, ¿qué sucede si una aplicación de mensajería notifica a un usuario por cada mensaje entrante y se envían muchos? Para evitar molestar al usuario con demasiadas notificaciones, es posible modificar la cola de notificaciones pendientes, reemplazando una o varias notificaciones pendientes por una nueva.
+
+Para hacer esto, es posible agregar una etiqueta a cualquier notificación nueva. Si una notificación ya tiene la misma etiqueta y aún no se ha mostrado, la nueva notificación reemplaza la notificación anterior. Si ya se ha mostrado la notificación con la misma etiqueta, se cierra la notificación anterior y se muestra la nueva.
+
+### Ejemplo de etiqueta
+
+Supongamos el siguiente código HTML básico:
+
+```html
+<button>¡Notifícame!</button>
+```
+
+Es posible manejar múltiples notificaciones de esta manera:
+
+```js
+window.addEventListener('load', function () {
+  var button = document.getElementsByTagName('button')[0];
+
+  if (window.self !== window.top) {
+    // Asegúrese de que si su documento está en un marco, hagamos que el 
+    // usuario lo abra primero en su propia pestaña o ventana. De lo contrario, 
+    // no podrá solicitar permiso para enviar notificaciones.
+    button.textContent = "Ver el resultado en vivo del código de ejemplo anterior";
+    button.addEventListener('click', () => window.open(location.href));
+    return;
+  }
+
+  button.addEventListener('click', function () {
+    // Si el usuario acepta ser notificado.
+    // Intentemos enviar diez notificaciones.
+    if (window.Notification && Notification.permission === "granted") {
+      var i = 0;
+      // El uso de un intervalo hace que algunos navegadores (incluido Firefox)
+      // bloqueen las notificaciones si hay demasiadas en un tiempo determinado.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, solo deberíamos ver la notificación "¡Hola! 9"
+        var n = new Notification("¡Hola! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere ser notificado o no
+    // Nota: debido a Chrome, no estamos seguros de que la propiedad de permiso
+    // esté configurada, por lo tanto, no es seguro verificar el valor
+    // "predeterminado" (default).
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario dijo que está bien
+        if (status === "granted") {
+          var i = 0;
+          // El uso de un intervalo hace que algunos navegadores (incluido
+          // Firefox) bloqueen las notificaciones si hay demasiadas en un tiempo
+          // determinado.
+          var interval = window.setInterval(function () {
+            // Gracias a la etiqueta, solo deberíamos ver la notificación "¡Hola! 9"
+            var n = new Notification("¡Hola! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // De lo contrario, podemos recurrir a una alerta modal regular.
+        else {
+          alert("¡Hola!");
+        }
+      });
+    }
+
+    // Si el usuario rechaza a ser notificado.
+    else {
+      // Podemos recurrir a una alerta modal regular
+      alert("¡Hola!");
+    }
+  });
+});
+```
+
+### Resultado
+
+{{ EmbedLiveSample('Tag_example', '100%', 30) }}
+
+## Especificaciones
+
+{{Specifications("api.Notification")}}
+
+## Compatibilidad con navegadores
+
+{{Compat("api.Notification")}}
+
+## Véase también
+
+- {{ domxref("Notification") }}
+