Crear notificaciones push en Javascript [ES]

Que son las notificaciones push?

• Una notificación push o notificación emergente es un mensaje corto que aparece directamente en la pantalla principal del teléfono o la computadora del usuario.
• Las características de las notificaciones push dependen del tipo de dispositivo que utilice el usuario.
• Una notificación push para web se configura directamente en el navegador web. Están vinculadas a un sitio web y no es necesario desarrollar una aplicación específica para enviarlas.

Empezamos:

Primero que todo, necesitamos pedir "permiso" al usuario para poder envíarle notificaciones

// /script.js

const button = document.querySelector('button'); // Seleccionamos el botón del DOM

button.addEventListener('click', () => {
  Notification.requestPermission().then((perm) => {
    alert(perm); // Alertamos si es "granted " = tenemos permiso / si es "denied" = no tenemos permiso
  });
});

Luego, lo que tenemos que hacer es interactuar con el mismo objecto Notification()

button.addEventListener('click', () => {
  Notification.requestPermission().then((perm) => {
    if (perm === 'granted') new Notification('Ejemplo de notificación');
  });
});

Que nos devuelve esta notificación:

Ésta es la forma más básica de generar notificaciones en nuestra web.

Lo importante es saber usar y no abusar de esta herramienta, porque creo que a nadie le gusta que le envíen muchas notificaciones, sea en Windows, Mac o en un telefono móvil.

La propiedad body

• La propiedad body dentro del objeto Notification() es una de las más importante ya que nos permite explayarnos un poco más sobre nuestra notificación. Sólo debemos agregar la propiedad body, así:

button.addEventListener('click', () => {
  Notification.requestPermission().then((perm) => {
    if (perm === 'granted')
      new Notification('Ejemplo de notificación', {
        body: 'Acá hay más información',
      });
  });
});

La propiedad icon

• Con esta propiedad, podemos agregar un icono a nuestra notificación, para que quede mejor presentada:

// La imágen debería estar en nuestra carpeta principal

button.addEventListener('click', () => {
  Notification.requestPermission().then((perm) => {
    if (perm === 'granted')
      new Notification('Ejemplo de notificación', {
        body: 'Acá hay más información',
        icon: 'alert-png.png', // nombre de la imagen o lugar donde se encuentra
  });
});

y el resultado se vería así:

Hay muchas opciones más para realizar con notificaciones, pero esto es lo básico para empezar a notificar en tu web distintas cosas.