La guía de la API de notificaciones

La API de notificaciones es responsable de mostrar las notificaciones del sistema del usuario. Es la interfaz que los navegadores exponen al desarrollador para permitir mostrar mensajes al usuario, con su permiso, incluso si el sitio web no está abierto en el navegador.

Introducción a la API de notificaciones

losAPI de notificacioneses la interfaz que los navegadores exponen al desarrollador para permitirmostrando mensajes al usuario, con su permiso, incluso si el sitio web / aplicación web no está abierto en el navegador.

Esos mensajes son coherentes y nativos, lo que significa que la persona que los recibe está acostumbrada a la interfaz de usuario y la experiencia de usuario de ellos, son para todo el sistema y no son específicos de su sitio.

En combinación con elAPI de empujeesta tecnología puede ser una forma exitosa de aumentar la participación de los usuarios y mejorar las capacidades de su aplicación.

La API de notificaciones interactúa mucho conTrabajadores de servicios, ya que son necesarios para las notificaciones automáticas. Túlatause la API de notificaciones sin Push, pero sus casos de uso son limitados.

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}
n.close()

Permisos

Para mostrar una notificación al usuario, debe tener permiso para hacerlo.

losNotification.requestPermission()La llamada al método solicita este permiso.

Puedes llamar

Notification.requestPermission()

en esta forma muy simple, y mostrará un panel de otorgamiento de permisos, a menos que el permiso ya se haya otorgado antes.

Para hacer algo cuando el usuario interactúa (permite o niega), puede adjuntarle una función de procesamiento:

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}

Notification.requestPermission((permission) => { process(permission) }).then((permission) => { process(permission) })

Vea cómo pasamos una devolución de llamada y también esperamos unapromesa. Esto se debe a diferentes implementaciones deNotification.requestPermission()realizado en el pasado, que ahora debemos admitir ya que no sabemos de antemano qué versión se está ejecutando en el navegador. Entonces, para mantener las cosas en una sola ubicación, extraje el procesamiento de permisos en elprocess()función.

En ambos casos a esa función se le pasa unpermissioncadena que puede tener uno de estos valores:

  • granted: el usuario aceptó, nosotroslatamostrar un permiso
  • denied: el usuario negó, nosotroshipocresíamostrar cualquier permiso

Estos valores también se pueden recuperar comprobando elNotification.permissionpropiedad, que, si el usuario ya otorgó permisos, se evalúa comograntedodenied, pero si no has llamadoNotification.requestPermission()sin embargo, se resolverádefault.

Crea una notificación

losNotificationobjeto expuesto por elwindowEl objeto en el navegador le permite crear una notificación y personalizar su apariencia.

Aquí está el ejemplo más simple, que funciona después de que solicitó los permisos:

Notification.requestPermission()
new Notification('Hey')

Create a notification

Tiene algunas opciones para personalizar la notificación.

Agregar un cuerpo

Primero, puede agregar un cuerpo, que generalmente se muestra como una sola línea:

new Notification('Hey', {
  body: 'You should see this!'
})

Add a body to the notification

Agregar una imagen

Puede agregar una propiedad de icono:

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

Add an image to the notification

Se pueden encontrar más opciones de personalización, con propiedades específicas de la plataforma, enhttps://developer.mozilla.org/docs/Web/API/Notification

Cerrar una notificación

Es posible que desee cerrar una notificación una vez que la haya abierto.

Para hacerlo, cree una referencia a la notificación que abre:

const n = new Notification('Hey')

y luego puedes cerrarlo más tarde, usando:

n.close()

o con un tiempo de espera:

setTimeout(n.close(), 1 * 1000)

Más tutoriales de navegador: