javascript - notificaciones - Ejemplo de notificación de escritorio de Chrome




web notifications html5 (6)

A continuación se muestra un ejemplo de trabajo de notificaciones de escritorio para Chrome, Firefox, Opera y Safari. Tenga en cuenta que, por razones de seguridad, a partir de Chrome 62, es posible que ya no se solicite el permiso para la API de notificaciones de un iframe de origen cruzado , por lo que deberá guardar este ejemplo en un archivo HTML en su sitio / aplicación y asegurarse de que utilizar 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 W3C , documentada en MDN . 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 las extensiones de Chrome, no requieren ningún permiso especial del usuario, admiten notificaciones de texto enriquecido, pero desaparecen automáticamente y es posible que el usuario no note que se han activado . Las notificaciones de W3C funcionan en muchos navegadores (ver soporte en caniuse ), requieren permiso del usuario, se acumulan sobre la notificación anterior y no desaparecen automáticamente en Chrome ( lo hacen en Firefox ).

Ultimas palabras

El soporte de notificaciones ha estado en continuo flujo, con varias API en desuso en los últimos tres años. Si tienes curiosidad, consulta 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/ .

También hay una llamada diferente (aunque con los mismos parámetros) para crear notificaciones de los trabajadores del servicio, que por alguna razón , no tienen acceso al constructor Notification() .

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

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

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





Por alguna razón, la respuesta aceptada no me funcionó, terminé usando el siguiente ejemplo:

https://developer.chrome.com/apps/app_codelab_alarms#create-notification

function notifyMe() {

    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Don\'t forget!',
        message: 'You have  things to do. Wake up, dude!'
    }, function(notificationId) {});

}

Verifique el design y la especificación de la API (aún es un borrador) o revise 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á intentando crear su propia extensión de Google Chrome y le gustaría saber cómo manejar los permisos, el almacenamiento local y demás), consulte la Extensión del notificador de Gmail : descargue el archivo crx en lugar de instalarlo Lo descomprime y lee su código fuente.







notifications