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




push web (9)

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


Answers

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.





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


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.


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) {});

}

Hice este simple envoltorio de notificación. Funciona en Chrome, Safari y Firefox.

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

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


Esto es para garantizar que algún otro sitio no pueda hacer trucos desagradables para intentar robar sus datos. Por ejemplo, al reemplazar el constructor de arreglos , y luego incluir esta URL JSON a través de una etiqueta <script> , un sitio malicioso de terceros podría robar los datos de la respuesta JSON. Poniendo un while(1); al principio, el script se bloqueará en su lugar.

Una solicitud del mismo sitio que usa XHR y un analizador JSON separado, por otro lado, puede ignorar fácilmente el while(1); prefijo.





javascript desktop google-chrome notifications