Introducción
La API de Notifications te permite mostrar notificaciones al usuario sobre eventos determinados, tanto de forma pasiva (correos electrónicos nuevos, tweets o eventos de calendario) como sobre interacciones del usuario, independientemente de la pestaña que esté enfocada. Hay un borrador de especificación, pero por el momento no se encuentra en ningún estándar.
Puedes seguir estos pasos sencillos para implementar notificaciones en solo unos minutos:
Paso 1: Verifica la compatibilidad con la API de Notifications
Verificamos si webkitNotifications es compatible. Ten en cuenta que el nombre de webkitNotifications se debe a que es parte de una especificación 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 que muestre notificaciones
Cualquiera de los constructores mencionados mostrará un error de seguridad si el usuario no otorgó permisos de forma manual al sitio web para mostrar notificaciones.
Para manejar la excepción, puedes usar una sentencia try-catch, pero también puedes usar el método checkPermission para 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 barras de información no solicitadas. En este caso, la acción del usuario es hacer clic en el botón con el ID “show_button”.
El fragmento anterior nunca funcionará si el usuario no ha hecho clic de manera 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 notificación para mantener el código más limpio, aunque esto está fuera del alcance de este instructivo.