From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/notifications_api/index.html | 198 ++++++++++++++ .../usando_la_api_de_notificaciones/index.html | 294 +++++++++++++++++++++ 2 files changed, 492 insertions(+) create mode 100644 files/es/web/api/notifications_api/index.html create mode 100644 files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html (limited to 'files/es/web/api/notifications_api') diff --git a/files/es/web/api/notifications_api/index.html b/files/es/web/api/notifications_api/index.html new file mode 100644 index 0000000000..596064172e --- /dev/null +++ b/files/es/web/api/notifications_api/index.html @@ -0,0 +1,198 @@ +--- +title: Notifications API +slug: Web/API/Notifications_API +tags: + - Landing + - NeedsTranslation + - Notifications + - TopicStub + - permission + - system +translation_of: Web/API/Notifications_API +--- +

{{DefaultAPISidebar("Web Notifications")}}

+ +

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

+ +

Concepts and usage

+ +

On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initialises, using the {{domxref("Notification.requestPermission()")}} method. This will spawn a request dialog, along the following lines:

+ +

+ +

From here the user can choose to allow notifications from this origin, block notifications from this origin, or not choose at this point. Once a choice has been made, the setting will generally persist for the current session. 

+ +
+

Note: As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

+
+ +

Next, a new notification is created using the {{domxref("Notification.Notification","Notification()")}} constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.

+ +

{{AvailableInWorkers}}

+ +

In addition, the Notifications API spec specifies a number of additions to the ServiceWorker API, to allow service workers to fire notifications.

+ +
+

Note: To find out more about using notifications in your own app, read Using the Notifications API.

+
+ +

Notifications interfaces

+ +
+
{{domxref("Notification")}}
+
Defines a notification object.
+
+ +

Service worker additions

+ +
+
{{domxref("ServiceWorkerRegistration")}}
+
Includes the {{domxref("ServiceWorkerRegistration.showNotification()")}} and {{domxref("ServiceWorkerRegistration.getNotifications()")}} method, for controlling the display of notifications.
+
{{domxref("ServiceWorkerGlobalScope")}}
+
Includes the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} handler, for firing custom functions when a notification is clicked.
+
{{domxref("NotificationEvent")}}
+
A specific type of event object, based on {{domxref("ExtendableEvent")}}, which represents a notification that has fired.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}256[3]
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions +

{{CompatChrome(42.0)}}

+ 		{{CompatGeckoDesktop("42.0")}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoMobile(22.0)}}		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(42.0)}}[4]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

[1] Prior to Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification() method. In addition, the Notification was displayed when calling the show() method, and supported only the click and close events (Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.)

+ +

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

+ +

[4] Firefox 42 has shipped with web notifications from Service Workers disabled.

+ +

Firefox OS permissions

+ +

When using notifications in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above:

+ +
"permissions": {
+  "desktop-notification": {}
+}
+ +

See also

+ + diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html new file mode 100644 index 0000000000..8220534f63 --- /dev/null +++ b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html @@ -0,0 +1,294 @@ +--- +title: Usando la API de Notificaciones +slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones +tags: + - API + - Notificaciones + - Tutorial +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}

+ +

La API de Notificaciones 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.

+ +

{{AvailableInWorkers}}

+ +

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.

+ +

+ +

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.

+ +

Ejemplos

+ +
+
+

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 Slack.

+ +

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

+ +
    +
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • +
  • Emogotchi: 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. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • +
+
+ +
+

.

+
+
+ +

Pidiendo permiso

+ +

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.

+ +

Comprobando el permiso actual

+ +

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

+ +
+
default
+
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
+
granted
+
El usuario ha permitido las notificaciones de la app.
+
denied
+
El usuario ha denegado las notificaciones de la app.
+
+ +

Obteniendo permiso

+ +

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 Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

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:

+ +
Notification.requestPermission();
+ +

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 else ... if 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 To-do List Notifications):

+ +
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.
+}
+ +
+

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

+
+ +

Permisos en Firefox OS manifest

+ +

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 manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+
+ +
+

Nota: 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.

+
+ +

Creando una notificación

+ +

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")}}.

+ +

Por ejemplo, en el Ejemplo de Emogotchi 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:

+ +
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);
+}
+ +

Cerrando las notificaciones

+ +

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 bind() para asegurarnos de que la función close() está asociada a la notificación.

+ +
setTimeout(n.close.bind(n), 5000);
+
+ +
+

Nota: 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".

+
+ +

Eventos de Notificación

+ +

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

+ +
+
{{event("click")}}
+
Lanzado cuando el usuario hace click en la notificación.
+
{{event("error")}}
+
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
+
+ +

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.

+ +

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:

+ +
+
{{event("close")}}
+
Lanzado cuándo la notificación se cierra.
+
{{event("show")}}
+
Lanzado cuándo la notificación se muestra al usuario.
+
+ +

Reemplazando notificaciones existentes

+ +

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.

+ +

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.

+ +

Ejemplo de etiquta

+ +

Teniendo el siguiente código HTML:

+ +
<button>Notifícame!</button>
+ +

Es posible controlar múltiples notificaciones de la siguiente forma:

+ +
window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification && 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 && 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 && 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!");
+    }
+  });
+});
+ +

Comprueba el ejemplo en directo abajo:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Receiving notification of clicks on app notifications

+ +

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:

+ +
    +
  1. 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.
    2. +
  2. A system message otherwise.
    3. +
+ +

See this code snippet for an example of how to deal with this.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf