Nueva pregunta

Pregunta:

Fecha: 10-02-2016 09:03:36 (En Español)

[Aporte] Notificaciones Web HTML5 con JavaScript[Resuelta]

Hola amigos de la comunidad,
En esta ocasión quiero pasarles un código de notitificaciones.
Creo que la mayoria ha usado WhatsApp Web y les ha parecido interesante las notificaciones de escritorio.
<html>
	<head>
		<meta charset="UTF-8">
		<title>Notificaciones JavaScript ElCapa8</title>
		<script charset="UTF-8">
		function notifyMe() {
			//Vamos a comprobar si el navegador es compatible con las notificaciones
			if (!("Notification" in window)) {
				alert("This browser does not support desktop notification");
			}
			// Vamos a ver si ya se han concedido permisos de notificación
			else if (Notification.permission === "granted") {
				// Si está bien vamos a crear una notificación
				var body = "Hola";
				var icon = "http://www.elcapa8.com/img/favicon.ico";
				var title = "Notificación";
				var options = {
					body: body,
					icon: icon,
					lang: "ES",
					renotify: "true"
				}
				var notification = new Notification(title,options);
				var audio = new Audio('notificacion.mp3');
				audio.play();
				setTimeout(notification.close.bind(notification), 5000);
			}
			// De lo contrario, tenemos que pedir permiso al usuario
			else if (Notification.permission !== 'denied') {
				Notification.requestPermission(function (permission) {
					// Si el usuario acepta, vamos a crear una notificación
					if (permission === "granted") {
						var notification = new Notification("Gracias, Ahora podras recibir notifiaciones de nuestra página");
					}
				});
			}	
			// Por fin, si el usuario ha denegado notificaciones, y usted
			// Quiere ser respetuoso no hay necesidad de preocuparse más sobre ellos.
		}
		</script>
	</head>
	<body>
		<button onclick="notifyMe()">Notificame!</button>
	</body>
</html>


Link al articulo completo: QuéCódigo.com#notify
Etiquetas: Aporte - HTML5 - Javascript Votos: 8 - Respuestas: 4 - Vistas: 19 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 11-02-2016 08:20:04 Hola Edinson, muchas gracias por compartir, he realizado una prueba en Firefox y Chrome sin problemas, no así en Internet Explorer que aparentemente no tiene soporte....

    Algo a mencionar es que deberían agregar un archivo mp3 para el sonido, ya que no esta provisto en el ejemplo ("notificacion.mp3"). También mencionar que la imagen en la ruta "www.elcapa8.com/img/favicon.ico" arroja error 500 - Internal Server Error.

    De aquí pueden descargar un sonido de ejemplo al mejor estilo Windows 10: http://www.tonosfrikis.com/1327

    Saludos,
      Votos: 4 - Link respuesta
     
  • Fecha: 11-02-2016 09:58:45 Hola,
    Si lamentablemente el script no tiene soporte para Intenet Explorer(En mi opinión es obsoleto), Cuando estaba haciendo es Script no habia hecho modificaciones al dominio entonces perdona el Error 500 Esperamos poder tener lo mas proto posible el dominio.
    Y gracias por el sonido de Notificación se me habia olvidado XD.
    Quisiera aclarar que la función de notificaciones tiene el mismo una etiqueta en Options llamada Sound:, pero esta resulto obsoleta así que agregue el sonido con JavaScript.
    Prontamente cuando tengamos el dominio Listo agregare mas info desde mi web ya que es un tema ineteresante y casi no encontre documentación ni en español ni en Ingles.

    Saludos.
    Edinson Tique
      Votos: 4 - Link respuesta
     
  • Fecha: 23-02-2016 11:50:21 Gracias por el aporte saludos   Votos: 3 - Link respuesta
     
  • Fecha: 27-12-2018 20:10:19 Hola,
    Perdonen la demora al ampliar la información del mismo, ya por ser olvidado y ahora recordado por cuestiones de uso.
    Ya actualice el articulo con el nuevo post, de igual manera, posteare de nuevo un articulo.

    Saludos
      Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com