Notification.requestPermission()

La ultima especificación ha actualizado este método a una sintaxis de tipo promesa que funciona así:

Notification.requestPermission().then(function (permission) {
  /* ... */
});

Anteriormente, la sintaxis se basaba en un simple callback; esta versión ahora está obsoleta:

Notification.requestPermission(callback);

callback Opcional Obsoleto

Una callback opcional que es ejecutado con el valor del permiso. Obsoleto y reemplazado por el valor de retorno de la promesa.

Una Promise que se convierte en una DOMString con el permiso elegido por el usuario. Los valores posibles para este son:

• granted
• denied
• default

Asume este HTML básico:

<button onclick="notifyMe()">¡Notifícame!</button>

Es posible enviar una notificación de la siguiente forma: aquí presentamos un conjunto de código bastante detallado y completo que podrías usar si quisieras primero comprobar si las notificaciones son soportadas, luego comprobar si el permiso ha sido concedido para el origen actual para enviar notificaciones y luego solicitar permiso de ser requerido, antes de enviar una notificación.

function notifyMe() {
  // Comprobamos si el navegador soporta las notificaciones
  if (!("Notification" in window)) {
    alert(
      "Este navegador no es compatible con las notificaciones de escritorio",
    );
  }

  // Comprobamos si los permisos han sido concedidos anteriormente
  else if (Notification.permission === "granted") {
    // Si es correcto, lanzamos una notificación
    var notification = new Notification("¡Hola!");
  }

  // Si no, pedimos permiso para la notificación
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // Si el usuario nos lo concede, creamos la notificación
      if (permission === "granted") {
        var notification = new Notification("¡Hola!");
      }
    });
  }

  // Por último, si el usuario ha denegado el permiso,
  // y quiere ser respetuoso, no hay necesidad de molestarlo.
}

Ya no mostramos ejemplos corriendo en tiempo real en esta página, ya que Chrome y Firefox ya no conceden permisos de notificación para ser solicitados desde el origen <iframe>, para seguir con otros navegadores. Para ver un ejemplo en acción, revisa nuestro Ejemplo de lista de Todos (véase también la app corriendo en vivo.)

• Usando la API de Notificaciones