Ejemplo de notificaciones en el escritorio de Chrome

En los navegadores modernos, hay dos tipos de notificaciones:

• Notificaciones de escritorio - son sencillas de activar, funcionan mientras la página está abierta y pueden desaparecer automáticamente después de unos segundos
• Notificaciones del trabajador de servicios - un poco más complicadas, pero pueden funcionar en segundo plano (incluso después de cerrar la página), son persistentes y admiten botones de acción

La llamada a la API toma los mismos parámetros (excepto las acciones, que no están disponibles en las notificaciones de escritorio), que están bien documentados en MDN y, para los service workers, en el sitio Google's Web Fundamentals.

A continuación se muestra un ejemplo de funcionamiento de las notificaciones de escritorio para Chrome, Firefox, Opera y Safari. Tenga en cuenta que, por razones de seguridad, a partir de Chrome 62, el permiso para la API de notificaciones ya no puede solicitarse desde un iframe de origen cruzado, por lo que no podemos hacer una demostración utilizando los fragmentos de código de StackOverflow&#39. Tendrá que guardar este ejemplo en un archivo HTML en su sitio/aplicación, y asegurarse de utilizar localhost:// o HTTPS.

begin snippet: js hide: false console: true babel: false -->

// 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');
  };
 }
}

 Notify me!

...fin del fragmento..;

Estamos utilizando la API W3C Notifications. No confundas esto con la API de notificaciones de las *extensiones de Chrome, que es diferente. Las notificaciones de las extensiones de Chrome obviamente sólo funcionan en las extensiones de Chrome, y no requieren ningún permiso especial del usuario.

Las notificaciones del W3C funcionan en muchos navegadores (véase el soporte en caniuse), y requieren el permiso del usuario. Como mejor práctica, no pida este permiso de entrada. Explique primero al usuario por qué quiere 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.

Palabras finales

El soporte de notificaciones ha estado en continuo cambio, con varias APIs que han quedado obsoletas en los últimos años. Si tienes curiosidad, consulta las ediciones anteriores de esta respuesta para ver lo que 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 para el mismo efecto, dependiendo de si estás en un trabajador de servicios o no - ver este ticket que presenté mientras trabajaba en Google.

Véase también notify.js para una biblioteca de ayuda.

Consulte el diseño y la especificación de la API (todavía es un borrador) o consulte el código fuente de (página ya no disponible) para ver un ejemplo sencillo: Es principalmente una llamada a window.webkitNotifications.createNotification.

Si quieres un ejemplo más robusto (estás tratando de crear tu propia extensión de Google Chrome's, y te gustaría saber cómo tratar con los permisos, el almacenamiento local y demás), echa un vistazo a Gmail Notifier Extension: descarga el archivo crx en lugar de instalarlo, descomprímelo y lee su código fuente.

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