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


409

¿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.


2
He dejado una respuesta a continuación actualizada a partir de noviembre de 2012, después de que las notificaciones HTML quedaron en desuso. Tiene un ejemplo real como el que estabas buscando.
Dan Dascalescu


1
Actualización : a partir de 2015, los sitios web también pueden enviar notificaciones push reales, que se entregan incluso cuando el usuario no está navegando por el sitio web. Mira esta respuesta
collimarco

3
Todos estos votantes para marcarlo como cerrado deben ser amantes de IE / Safari. Es específico para la notificación del navegador y particularmente para Chrome. si está tan fuera de tema, ¿por qué hay tanta gente que le gusta y lo marca como protagonista en primer lugar?
prash

2
¿Por qué fuera de tema?
SmartManoj

Respuestas:


717

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.


44
@mghaoui - popular! = verdadero (necesariamente). He marcado esta como la respuesta correcta.
Sridhar Ratnakumar

2
window.webkitNotifications.checkPermission () lanzará una excepción en navegadores que no sean Chrome
JT Taylor

2
Cerrar no es un método. Creo que desea notify.cancel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> También parece cerrarse por sí solo.
KingOfHypocrites

3
Gracias por el apoyo, usar esto con Pusher me ha ayudado a construir un sistema de notificación.
Awijeet

3
no funciona en Chrome versión 47.0.2526.80 dev-m mientras trabajaba en Mozilla Fire Fox en Windows 8
Sarz

87

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.


¿No hay algo que funcione para todos los navegadores?
Royi Namir

@Royi, hay una extensión de Firefox , así como una implementación nativa de Firefox que llegará tarde o temprano . En el caso de Internet Explorer, una posible solución sería solicitar a los usuarios de su sitio que descarguen Chrome Frame , ya que esta sería una solución viable para que las notificaciones funcionen. Hay alguna otra solución de Microsoft .
Bryan Field

77
Esta respuesta es completamente obsoleta ahora, 4 años después. @RoyiNamir: existe la API de notificaciones. Mira mi respuesta .
Dan Dascalescu

1
El enlace de ejemplo está muerto.
Vinny

33

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


@Miron Eche un vistazo al hipervínculo en el primer párrafo. Enlacé la fuente y luego copié el código en mi respuesta según la etiqueta SO. Si MDN no fuera un wiki, podría haber sido más explícito sobre quién era el autor, pero no pretendo nada.
mpen

¿No veo dónde dijo que lo escribió?
Brandito

codepen no funciona
Stepan Yakovenko

1
@StepanYakovenko Intente nuevamente con el enlace codepen. Agregué un extra elseal final para decirle cuál es el problema. Probablemente desactivó las notificaciones a nivel mundial como yo: \
mpen


4

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.


@gravmatt, ¿ha encontrado un problema con Firefox en el que si hay más de una ventana de navegador abierta, la notificación no aparece?
eran otzap

@eranotzap debería funcionar con múltiples pestañas. Ejecuto un proyecto donde esto no es problema. pero no estoy seguro con múltiples ventanas.
gravmatt

Tengo el mismo problema con varias pestañas
eran otzap

¿Funciona desde múltiples pestañas en Firefox?
eran otzap

1
@eranotzap Lo probé ahora en Windows y Mac. No puedo ver la notificación en ninguna esquina de la pantalla, pero escucho el sonido de las notificaciones y en Mac recibo la notificación en la barra lateral (con varias pestañas abiertas). Firefox es el nuevo explorador de internet.
gravmatt



3
<!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>


1
Abstenerse de publicar respuestas de solo código. Agregue un poco de comentarios y / o explicación, para que cuando las personas lean esta publicación en el futuro la entiendan.
Adriaan

Sin embargo, para este fragmento de código en particular, parece bastante sencillo. Otros usuarios también podrían publicar una pregunta de seguimiento en el comentario, ¿verdad?
frostshoxx

1
JSfiddle con el código anterior no funciona, "El permiso para la API de notificación ya no se puede solicitar a un iframe de origen cruzado". Sin embargo, cuando abre la consola del desarrollador e ingresa Notification.requestPermission();, var notification = new Notification('hello', { body: "Hey there!", });aparece la notificación.
Kai Noack

Lo siento, pero ¿qué agrega exactamente esta respuesta a la mía?
Dan Dascalescu
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.