javascript - escritorio - push js php mysql

Ejemplo de notificación de escritorio de Chrome

Question

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

Answer 1

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.

Answer 2

Aquí hay buena documentación sobre APIs,

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

Y, la explicación del video oficial por Google,

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

Answer 3

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.

Answer 4

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. webkitNotifications es ahora Notification .

Answer 5

Notify.js es un contenedor 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/

Answer 6

Parece que window.webkitNotifications ya ha sido desaprobado 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!");
      }
    });
  }

  // At last, if the user already denied any notification, and you 
  // want to be respectful there is no need to bother him any more.
}

codepen

Answer 7

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

}

Answer 8

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.

Answer 9

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