Introducción a las notificaciones en JavaScript

Ver ejemplos Descargar fuente

Las notificaciones en JavaScript son una de las formas más efectivas de comunicar información relevante a los usuarios en aplicaciones y sitios web. Permiten mostrar mensajes del sistema operativo incluso cuando la página no está en primer plano, lo que las hace ideales para avisos, alertas, errores o feedback de procesos.

En esta guía voy a explicarte cómo funcionan las notificaciones en JavaScript, cómo pedir permisos correctamente, cómo personalizarlas y qué errores evitar, basándome tanto en la API oficial como en la experiencia práctica usándolas en proyectos reales.

Anteriormente, aprendimos a como copiar y pegar en el Clipboard con JavaScript.

¿Qué son las notificaciones en JavaScript?

Las notificaciones web son mensajes que el navegador muestra a nivel de sistema usando la Notification API de HTML5. A diferencia de un alert(), estas notificaciones:

• No bloquean la ejecución del código
• Se muestran fuera de la página
• Pueden aparecer incluso si el usuario está en otra pestaña

Esto permite informar al usuario de eventos importantes sin interrumpir su flujo.

En mi caso, las he usado sobre todo para:

• Confirmaciones de acciones
• Mensajes de estado de procesos
• Advertencias y errores no críticos

La API Notification en JavaScript

En HTML5 podemos emplear el objeto Notification (notificación) para configurar y mostrar mensajes informativos al usuario; la sintaxis para crear una notificación es la siguiente:

var notification = new Notification(titulo, {opciones})

Donde:

• titulo es el texto principal
• opciones es un objeto opcional para personalizar la notificación

Ejemplo de notificación básica

La notificación más sencilla de configurar es en la cual solo esta presente el título de la misma; en otras palabras:

var notification = new Notification("Hola Mundo")

La notificación más sencilla de configurar es en la cual solo esta presente el título de la misma; en otras palabras:

var notification = new Notification("Hola Mundo")

Obtenemos:

De clic en el siguiente botón para lanzar la notificación básica:

¡Lanzar notificación básica!

Verificar soporte de la API de notificaciones en el navegador

Podemos emplear el siguiente condicional para verificar soporte en el navegador:

if (!('Notification' in window)) {
  alert('Este navegador no soporta la API de Notificaciones');
  return;
}

Esto evita errores silenciosos en navegadores antiguos o entornos limitados.

Compatibilidad general

• Chrome: ✔
• Firefox: ✔
• Edge: ✔
• Safari: ✔ (con algunas particularidades)

Requiere HTTPS en la mayoría de navegadores modernos

Permisos de las notificaciones en JavaScript

Es posible que si simplemente lanzamos la notificación de la siguiente manera sin solicitar permisos:

var notification = new Notification("Hola Mundo")

No sea suficiente para mostrar la notificación; al igual que ocurre con la API de geolocalización en HTML5, es necesario solicitar permiso al usuario para poder visualizar las notificaciones.

La API define tres estados posibles:

• granted: el usuario permite notificaciones

• denied: el usuario las bloqueó

• default: aún no ha decidido

Puedes consultarlo así:

Notification.permission

También existen otras propiedades de solo lectura como:

• Notification.title
  • Título de la notificación.
• Notification.dir
  • Dirección de la notificación.
• Notification.lang
  • Lenguaje empleado en la notificación.
• Notification.body
• Texto secundario de la notificación.
  • Notification.tag
• Id de la notificación.
  • Notification.icon

URL de la imagen empleada como icono de la notificación.

Solicitar permiso correctamente

Para solicitar permiso se usa:

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

Pedir permiso sin interacción del usuario suele fallar o provocar bloqueos automáticos del navegador. Lo ideal es hacerlo tras un clic, por ejemplo en un botón.

Este método se emplea para preguntar al usuario si permite mostrar notificaciones:

Una vez obtenida la respuesta por parte del usuario, en el cuerpo del método se puede definir y lanzar las notificaciones:

Sintaxis del método Notification.requestPermission()

Notification.requestPermission(function(permission){ var notification = new Notification("Hola Mundo"); });

Crear y mostrar notificaciones en JavaScript

Una vez que el permiso es granted, ya se puede mostrar la notificación:

let notification = new Notification("Hola Mundo", {
 body: "Este es el cuerpo de la notificación",
 icon: "/icono.png"
});

Aquí es donde realmente empiezan las posibilidades.

Parámetros de Personalización de las notificaciones en JavaScript

Es posible personalizar a un mayor grado que simplemente colocar un título en las notificaciones a través del segundo parámetro opcional que permite configurar un conjunto de opciones que veremos a continuación:

• titulo: Mensaje o título principal que se mostrará en la notificación.
• opciones: (opcional)
• body: Texto con algún contenido extra a mostrar.
• dir: Indica la dirección de la alineación de los textos de las notificaciones, puede ser:
  • auto.
  • ltr: alinea los textos de la notificación a la izquierda:

De clic en el siguiente botón para lanzar la notificación con el texto alineado a la izquierda:

• ¡Lanzar notificación (texto a la izquierda)!
• rtl: alinea los textos de la notificación a la derecha:

De clic en el siguiente botón para lanzar la notificación con el texto alineado a la derecha:

• ¡Lanzar notificación (texto a la derecha)!
• lang: Especifica el lenguaje usado en la notificación.
• tag: Identificador de la notificación.
• icon: URL de una imagen para ser usado como icono en la notificación:

 let options = {
  body: "Mensaje secundario",
  icon: "/icon.png",
  dir: "ltr",
  lang: "es",
  tag: "demo"
};

Eventos de las notificaciones en JavaScript

• Notification.onclick
  • Evento que indica cuando el usuario realiza un clic sobre las notificaciones.
• Notification.onshow
  • Evento que indica cuando se muestran las notificaciones.
• Notification.onerror
  • Evento que indica cuando ocurre un error.
• Notification.onclose
  • Evento que indica cuando se cierran las notificaciones.

La sintaxis básica para todos los eventos vistos anteriormente es la siguiente:

var notification = new Notification( "Hola Mundo");
notification.onshow = function() {
  console.log("Notificación mostrada");
};

notification.onclick = function() {
  console.log("Click en la notificación");
};

notification.onerror = function() {
  console.log("Error en la notificación");
};

notification.onclose = function() {
  console.log("Notificación cerrada");
};

En proyectos reales, el evento onclick es especialmente útil para:

• Redirigir al usuario
• Activar una acción
• Traer la ventana al frente

Manejo de errores comunes

¿Qué pasa si envío una notificación sin permiso?

Si intentas mostrar una notificación sin permiso, no se mostrará y puede lanzar errores. Por eso conviene controlar todos los casos:

if (Notification.permission === "granted") {
 new Notification("Hola");
}

Este control evita muchos comportamientos inconsistentes entre navegadores.

Ejemplo completo de notificaciones en JavaScript

Con el siguiente código JavaScript:

function notificacionBasica() {

  if (!('Notification' in window)) {
    alert('Tu navegador no soporta notificaciones');
    return;
  }

  if (Notification.permission === "granted") {
    new Notification("Hola Mundo");
  } 
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function(permission) {
      if (permission === "granted") {
        new Notification("Hola Mundo");
      }
    });
  }
}

Y un botón en HTML para activar la notificación:

<button onclick="notificacionBasica()">¡Lanzar notificación básica!</button>

Obtenemos una notificación como la siguiente:

Podrás encontrar todos los ejemplos vistos hasta el momento en los siguientes enlaces:

Notification API vs Push Notifications

Es importante aclarar una confusión común:

• Notification API: notificaciones locales, dependen de la página
• Push Notifications: funcionan incluso con la web cerrada (requieren Service Workers)

Si necesitas notificaciones persistentes o en segundo plano, entonces debes usar Push API + Service Workers, como explican guías más avanzadas.

Buenas prácticas al usar notificaciones

Solicita permiso solo tras una acción del usuario

• No abuses de las notificaciones
• Aporta siempre valor real
• Usa tag para evitar duplicados
• Prueba en varios navegadores y dispositivos

Una mala implementación puede hacer que el usuario bloquee tu sitio para siempre.

FAQs sobre notificaciones en JavaScript

• ¿Funcionan las notificaciones sin HTTPS?
  • No, en la mayoría de navegadores modernos requieren HTTPS.
• ¿Safari soporta Notification API?
  • Sí, aunque con diferencias en la forma de pedir permisos.
• ¿Puedo usar notificaciones en móviles?
  • Sí, pero para mayor compatibilidad es recomendable usar Service Workers.
• ¿Se pueden reemplazar notificaciones anteriores?
  • Sí, usando la propiedad tag.

Ahora, aprende a ejecutar JavaScript en paralelo con los workers.

Conclusión

Las notificaciones en JavaScript son una herramienta potente cuando se usan correctamente. Con la API Notification puedes mostrar mensajes claros, personalizados y controlados, siempre respetando permisos y experiencia de usuario.

Si empiezas con notificaciones básicas y sigues las buenas prácticas, tendrás una base sólida para luego dar el salto a notificaciones push más avanzadas.

Ver ejemplos Descargar fuente