Ejemplo de notificación de escritorio de Chrome [cerrado]

¿Cómo se usan las notificaciones de escritorio de Chrome ? Me gustaría que use eso en mi propio código.

Actualización : Aquí hay una publicación de blog que explica las notificaciones de webkit con un ejemplo.

En los navegadores modernos, hay dos tipos de notificaciones:

• Notificaciones de escritorio : fáciles de activar, funcionan siempre que la página esté abierta y pueden desaparecer automáticamente después de unos segundos
• Las notificaciones de Service Worker : un poco más complicadas, pero pueden funcionar en segundo plano (incluso después de que se cierra la página), son persistentes y admiten botones de acción

La llamada a la API toma los mismos parámetros (excepto las acciones, no disponibles en las notificaciones de escritorio), que están bien documentados en MDN y para los trabajadores de servicios, en el sitio web de Fundamentos web.

A continuación se muestra un ejemplo funcional de notificaciones de escritorio para Chrome, Firefox, Opera y Safari. Tenga en cuenta que, por razones de seguridad, comenzando con Chrome 62, es posible que ya no se solicite permiso para la API de notificación de un iframe de origen cruzado , por lo que no podemos realizar una demostración con los fragmentos de código de StackOverflow. Tendrá que guardar este ejemplo en un archivo HTML en su sitio / aplicación, y asegúrese de usar localhost://o HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

Estamos utilizando la API de notificaciones del W3C . No confunda esto con la API de notificaciones de extensiones de Chrome , que es diferente. Las notificaciones de extensión de Chrome obviamente solo funcionan en extensiones de Chrome y no requieren ningún permiso especial del usuario.

Las notificaciones W3C funcionan en muchos navegadores (consulte el soporte en caniuse ) y requieren permiso del usuario. Como práctica recomendada, no solicite este permiso de inmediato. Primero explique al usuario por qué desearía recibir notificaciones y vea otros patrones de notificaciones push .

Tenga en cuenta que Chrome no respeta el icono de notificación en Linux, debido a este error .

Ultimas palabras

El soporte de notificaciones ha estado en continuo flujo, con varias API en desuso en los últimos años. Si tiene curiosidad, consulte las ediciones anteriores de esta respuesta para ver qué solía funcionar en Chrome y para conocer la historia de las notificaciones HTML enriquecidas.

Ahora el último estándar está en https://notifications.spec.whatwg.org/ .

En cuanto a por qué hay dos llamadas diferentes con el mismo efecto, dependiendo de si estás en un trabajador de servicio o no, mira este ticket que presenté mientras trabajaba en Google .

Vea también notify.js para una biblioteca auxiliar.

Verifique el diseño y la especificación API (todavía es un borrador) o verifique la fuente de (la página ya no está disponible) para ver un ejemplo simple: es principalmente una llamada a window.webkitNotifications.createNotification.

Si desea un ejemplo más sólido (está tratando de crear su propia extensión de Google Chrome y desea saber cómo manejar los permisos, el almacenamiento local y demás), consulte Extensión de notificador de Gmail : descargue el archivo crx en lugar de instalar descomprímalo y lea su código fuente.

Parece que window.webkitNotificationsya ha quedado en desuso y eliminado. Sin embargo, hay una nueva API , y parece funcionar también en la última versión de Firefox.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Me gusta: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples pero utiliza variables antiguas, por lo que la demostración ya no funciona. webkitNotificationses ahora Notification.

Hice este simple contenedor de notificaciones. Funciona en Chrome, Safari y Firefox.

Probablemente también en Opera, IE y Edge, pero aún no lo he probado.

Simplemente obtenga el archivo notify.js desde aquí https://github.com/gravmatt/js-notify y póngalo en su página.

Consíguelo en Bower

$ bower install js-notify

Así es como funciona:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Debe establecer el título, pero el objeto json como segundo argumento es opcional.

Aquí hay buena documentación sobre las API,

https://developer.chrome.com/apps/notifications

Y, explicación oficial en video de Google,

https://developers.google.com/live/shows/83992232-1001

Notify.js es un contenedor alrededor de las nuevas notificaciones de webkit. Funciona bastante bien

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>