Introducción
La API de Notifications te permite mostrar notificaciones al usuario para eventos determinados, tanto de forma pasiva (correos electrónicos, tweets o eventos de calendario nuevos) como en interacciones del usuario, independientemente de la pestaña que esté enfocada. Existe una especificación de borrador, pero actualmente no se encuentra en ningún estándar.
Puedes seguir estos sencillos pasos para implementar notificaciones en solo unos minutos:
Paso 1: Comprueba si se admite la API de Notifications
Verificamos si se admite webkitNotifications. Ten en cuenta que el nombre de webkitNotifications se debe a que forma parte de una especificación de borrador. La especificación final tendrá una función notifications() en su lugar.
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
Paso 2: Permite que el usuario otorgue permisos a un sitio web para mostrar notificaciones
Cualquiera de los constructores que mencionamos arrojará un error de seguridad si el usuario no otorgó permisos de forma manual al sitio web para mostrar notificaciones.
Para controlar la excepción, puedes usar una instrucción try-catch, pero también puedes usar el método checkPermission con el mismo propósito.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Si la aplicación web no tiene permiso para mostrar notificaciones, el método requestPermission mostrará una barra de información:
Sin embargo, es muy importante recordar que el método requestPermission solo funciona en controladores de eventos activados por una acción del usuario, como eventos del mouse o del teclado, para evitar las barras informativas no solicitadas. En este caso, la acción del usuario es el clic en el botón con el ID "show_button".
El fragmento anterior nunca funcionará si el usuario no hizo clic de forma explícita en un botón o vínculo que active requestPermission en algún momento.
Paso 3: Adjunta objetos de escucha y otras acciones
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
En este punto, es posible que desees encapsular todos estos eventos y acciones creando tu propia clase de Notification para mantener el código más limpio, aunque esto está fuera del alcance de este instructivo.