Cómo enviar notificaciones push con JavaScript

Las notificaciones de JavaScript son una forma de enviar mensajes a sus usuarios en tiempo real. Puede usarlos para notificar sobre las actualizaciones de su sitio web, nuevos mensajes de chat, correos electrónicos o cualquier actividad en las redes sociales. También puede usar notificaciones para recordatorios de calendario (como una próxima reunión en Google Meet o Zoom).

Aprenda a crear notificaciones de eventos en JavaScript y enviarlas a su teléfono o navegador web. Lo logrará utilizando JavaScript incorporado en el lado del cliente, ¡no se requiere una biblioteca externa!

Solicitud de permiso para enviar notificaciones

Para crear una notificación, debe llamar al Notificación clase para crear un objeto. Le da acceso a varias propiedades y métodos que puede usar para configurar su notificación. Pero antes de crear una notificación, primero deberá solicitar permiso al usuario.

El siguiente JavaScript solicitará permiso para enviar notificaciones de usuario. El Pedir permiso call devolverá un mensaje indicando si el navegador permite notificaciones o no:

constante botón = documento.querySelector('botón')
 botón.addEventListener("hacer clic", ()=> {
 Notificación.solicitudPermiso().entonces(permiso => {
 alerta (permiso)
 })
})

Al hacer clic en el botón, puede recibir una alerta que dice denegado. Esto significa que el navegador ha negado que JavaScript envíe notificaciones de eventos. El estado del permiso es denegado para los casos en que el usuario haya impedido explícitamente que los sitios envíen notificaciones (a través de la configuración del navegador) o el usuario esté navegando en modo incógnito.

Para tales casos, es mejor respetar la decisión del usuario sobre las notificaciones denegadas y debe abstenerse de molestarlo más.

Envío de notificaciones básicas

Una notificación push se crea creando un Notificación objeto con la nueva palabra clave. Para profundizar en la programación orientada a objetos, puede consultar nuestra guía sobre como crear clases en javascript.

Dado que enviaría notificaciones solo si se otorga el permiso, deberá envolverlo dentro de un si controlar.

constante botón = documento.querySelector('botón')
botón.addEventListener("hacer clic", ()=> {
 Notificación.solicitudPermiso().entonces(permanente => {
si(permanente 'otorgada') {
nuevo Notificación("Ejemplo de notificación")
 }
 })
})

Haga clic en el botón y recibirá una notificación automática en la esquina inferior derecha de su navegador web con el texto especificado.

Esta es la forma más básica de crear notificaciones y funciona tanto en su teléfono como en su computadora. Veamos algunas propiedades de notificación avanzadas.

Propiedades de notificaciones avanzadas

Además del título de la notificación, también puede pasar un argumento de opciones al constructor al crear el objeto de notificación. Este argumento de opciones debe ser un objeto. Aquí, puede agregar varias opciones para personalizar su notificación.

La propiedad del cuerpo

La primera propiedad que debes saber es cuerpo propiedad. Usaría esto para agregar un cuerpo a su notificación, generalmente para transmitir más información en forma de texto. Aquí hay un ejemplo simple:

constante botón = documento.querySelector('botón')
botón.addEventListener("hacer clic", ()=> {
 Notificación.solicitudPermiso().entonces(permanente => {
si(permanente 'otorgada') {
nuevo Notificación("Ejemplo de notificación", {
 cuerpo: "Esto es más texto",
 })
 }
 })
})

Si ejecuta este código, el texto del cuerpo se mostrará en la notificación de inserción, bajo el Ejemplo de notificación encabezamiento.

El atributo de datos

Muchas veces es posible que desee agregar datos personalizados a las notificaciones. Tal vez desee mostrar un mensaje de error en particular si se deniega el permiso o almacenar datos que recibió de una API. Para todos estos casos, puede utilizar el datos property para agregar datos personalizados a su notificación.

botón.addEventListener("hacer clic", ()=> {
 Notificación.solicitudPermiso().entonces(permanente => {
si(permanente 'otorgada') {
constante notificación = nuevo Notificación("Ejemplo de notificación", {
 cuerpo: "Esto es más texto",
 datos: {Hola: "mundo"}
 })

 alerta (notificación.datos.hola)
 }
 })
})

Puede acceder a los datos desde el datos propiedad de manera similar a como se muestra en el bloque de código anterior (dentro del alerta()).

También puede vincular detectores de eventos a sus notificaciones. Por ejemplo, el siguiente detector de eventos se ejecuta cada vez que cierra la notificación de inserción. La función de devolución de llamada simplemente registra el mensaje personalizado.

constante notificación = nuevo Notificación("Ejemplo de notificación", { 
 cuerpo: "Esto es más texto",
 datos: {Hola: "mundo"} 
})
notificación. addEventListener("cerca", mi => {
consola.log (e.objetivo.datos.hola)
})

Esta es una excelente manera de pasar datos si necesita hacer algo cuando alguien cierra una notificación o hace clic en ella. Aparte de la cerca evento (que se ejecuta cuando cierra la notificación), debe mantener estos oyentes de eventos en tu mente:

• espectáculo: se ejecuta cuando se muestra la notificación.
• hacer clic: se ejecuta cuando el usuario hace clic en cualquier parte de la notificación.
• error: se ejecuta cuando deniega el permiso de JavaScript para enviar notificaciones.

La propiedad del icono

El icono La propiedad es para agregar un ícono a la notificación push. Suponiendo que tiene un logotipo de icono llamado logotipo.png en el directorio actual, puede usarlo en sus notificaciones así:

constante notificación = nuevo Notificación("Ejemplo de notificación", { 
 icono: "logotipo.png"
})

Si tiene problemas para vincular sus archivos, necesita comprender el funcionamiento de las URL relativas y las URL absolutas.

Cuando guarde el archivo, actualice el navegador y haga clic en el botón, la notificación mostrará la imagen en el lado izquierdo del encabezado y el cuerpo.

El atributo de la etiqueta

Cuando configuras el etiqueta atributo en su notificación, básicamente le está dando a la notificación una identificación única. No pueden existir dos notificaciones juntas si tienen la misma etiqueta. En su lugar, la notificación más reciente sobrescribirá la notificación anterior.

Considere nuestro ejemplo de botón anterior (sin una etiqueta). Si hiciera clic en el botón tres veces seguidas, aparecerán las tres notificaciones y se apilarán una encima de la otra. Ahora supongamos que agregó la siguiente etiqueta a la notificación:

constante notificación = nuevo Notificación("Ejemplo de notificación", { 
 cuerpo: "Esto es más texto",
 etiqueta: "Mi nueva etiqueta"
})

Si volviera a hacer clic en el botón, solo aparecerá un cuadro de notificación. Cada clic posterior sobrescribirá la notificación anterior, por lo que solo se mostrará una notificación sin importar cuántas veces haga clic en el botón. Esto es útil si desea agregar datos dinámicos (como Matemáticas.aleatoria()) Al cuerpo:

constante notificación = nuevo Notificación("Ejemplo de notificación", { 
 cuerpo: Matemáticas.aleatorio()
 icono: "logotipo.png",
 etiqueta: "Mi etiqueta corporal"
})

Cada vez que haga clic en el botón, aparecerá un nuevo número. Utilice la propiedad de etiqueta si desea sobrescribir una notificación actual con nueva información dentro de ella. En una aplicación de mensajería, por ejemplo, puede usar el atributo de etiqueta para sobrescribir la notificación con nuevos mensajes.

Un ejemplo de notificación push usando JavaScript

El siguiente ejemplo detecta cada vez que pierde el foco en su página (es decir, cuando cierra la página o abre una nueva pestaña). En este caso, el código envía una notificación pidiéndole que regrese:

dejar notificación
documento.addEventListener("cambio de visibilidad", ()=> {
si(documento.visibilityState "oculto") {
 notificación = nuevo Notificación("Regresa porfavor", {
 cuerpo: "No te vayas todavía :("
 etiqueta: "Regresar"
 })
 } demás {
 notificación.cerrar()
 }
})

Cada vez que pierda el foco en esa página, recibirá una notificación que le pedirá que regrese a la página. Pero una vez que regresa a la página, el demás el bloque se ejecuta, lo que cierra la notificación push. Esta técnica es excelente en situaciones en las que desea brindarle al usuario algún tipo de información después de abandonar su página.

Más información sobre JavaScript

La notificación de eventos es solo una de las numerosas funciones que puede encontrar en JavaScript. Para ser realmente bueno con las notificaciones, primero debe comprender las características fundamentales del lenguaje y la sintaxis de JavaScript. Construir juegos simples es una de las formas en las que puedes mejorar tus habilidades y familiarizarte con los conceptos básicos del lenguaje.