Introducción
La API de Notifications te permite mostrar notificaciones al usuario para eventos determinados, tanto de forma pasiva (correos electrónicos nuevos, tweets o eventos de calendario) como en las interacciones del usuario, independientemente de la pestaña que esté enfocada. Hay un borrador de especificaciones, pero actualmente no se encuentra en ningún estándar.
Puedes seguir estos sencillos pasos para implementar notificaciones en solo unos minutos:
Paso 1: Verifica la compatibilidad con la API de notificaciones
Verificamos si se admite webkitNotifications. Ten en cuenta que el nombre de webkitNotifications se debe a que forma parte de un borrador de especificación. La especificación final tendrá una función notifications().
// 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 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 permisos 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 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, te recomendamos que encapsules todos estos eventos y acciones creando tu propia clase Notification para mantener el código más limpio, aunque esto está fuera del alcance de este instructivo.