Ejemplo de notificación de escritorio de Chrome [cerrado]
¿ Cómo se utilizan las notificaciones de escritorio de Chrome ? Me gustaría usarlo en mi propio código.
Actualización : aquí hay una publicación de blog que explica las notificaciones de webkit con un ejemplo.
En los navegadores modernos, existen dos tipos de notificaciones:
- Notificaciones de escritorio : fáciles de activar, funcionan mientras la página esté abierta y pueden desaparecer automáticamente después de unos segundos.
- Notificaciones de Service Worker : 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 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 Fundamentals de Google .
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, a partir de Chrome 62, es posible que ya no se solicite permiso para la API de notificación desde un iframe de origen cruzado , por lo que no podemos demostrarlo utilizando los fragmentos de código de StackOverflow. Deberá guardar este ejemplo en un archivo HTML en su sitio/aplicación y asegurarse de utilizar localhost://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. Obviamente, las notificaciones de extensiones de Chrome solo funcionan en extensiones de Chrome y no requieren ningún permiso especial por parte del usuario.
Las notificaciones del W3C funcionan en muchos navegadores (consulte el soporte en caniuse ) y requieren el permiso del usuario. Como práctica recomendada, no solicite este permiso de inmediato. Primero explique al usuario por qué querría recibir notificaciones y vea otros patrones de notificaciones automáticas .
Tenga en cuenta que Chrome no respeta el ícono de notificación en Linux debido a este error .
Ultimas palabras
El soporte de notificaciones ha estado en constante cambio y varias API han quedado obsoletas en los últimos años. Si tiene curiosidad, consulte las ediciones anteriores de esta respuesta para ver qué funcionaba en Chrome y conocer la historia de las notificaciones HTML enriquecidas.
Ahora el estándar más reciente se encuentra en https://notifications.spec.whatwg.org/ .
En cuanto a por qué hay dos llamadas diferentes con el mismo efecto, dependiendo de si eres un trabajador de servicios o no, consulta este ticket que presenté mientras trabajaba en Google .
Consulte también notify.js para obtener una biblioteca auxiliar.
Verifique el diseño y la especificación API (aún es un borrador) o consulte la fuente (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. descomprímelo y lee su código fuente.
Ver también
ServiceWorkerRegistration.showNotification
Parece que window.webkitNotificationsya ha quedado obsoleto 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
Me gusta: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples pero usa variables antiguas, por lo que la demostración ya no funciona. webkitNotificationses ahora Notification.
Hice este sencillo contenedor de notificación. 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 colóquelo 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.
