notificaciones en html5, casi funcionando..

[desoler]

hola gente,
Estoy estudiando esto de la Api de notificaciones de html5 y he logrado que me funcione, siempre y cuando presione un boton para ejecutar la notificación.
Lo que no puedo conseguir es que ese notificación se ejecute automaticamente al recibir una variable. Cuando hago click en este link:

Código HTML:

<a href="#" id="show_html_notification" style="margin-bottom:25px;font-size:11px;margin-left:-17px;margin-top:25px;">Activate Notification</a>
 

se ejecuta este script que carga un php el cual levanta datos de la BD y la notificación funciona perfectamente.

Código Javascript:

$(document).ready(function () {        
        if (window.webkitNotifications) {
            window.Notifications = window.webkitNotifications;                              
        $('#show_html_notification').click(function () {
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification('html');
                    } else {
                        window.Notifications.requestPermission();
                    }
                });                             
            } else {
        alert('HTML 5 Notifications are not supported on this browser/OS.');
        }
        });        
 
      function createNotification(type) {
    if(type != 'html')
    var notification = window.Notifications.createNotification("You have received HTML 5 Notification");
    else
    var notification = window.Notifications.createHTMLNotification('content.php');
            notification.show();
        }
 

Yo necesito que ese boton no se necesite presionar, si no que se ejecute solo cada x tiempo (30 segundo) que es cuando se conecta a la BD y lee si hay nueva notificación, se que estoy cerca, pero no logro que ese boton se auto-presione solo y me ejecute el código javascript.

Desde ya les agradezco el tiempo prestado.

[ocp001a]

Para empezar, tu problema es de javascript.
segundo, si analizas tu código, verás que al elemento show_html_notification le estás asignando un evento, si quieres que se ejecute la acción, o bien podrías simular el click o mejor colocas en una función ese código para que lo puedas llamar fácilmente.

[desoler]

Hola ocp001a,

Gracias por responder.
Eso es lo que necesito pero no se como hacerlo. Estoy estudiando un manual de javascript, pero no se aprende de un dia para otro.
No te pido que me lo soluciones, pero si tienes un ejemplo o algo te lo agradeceria mucho.

[desoler]

Hola compañeros,

Alguna idea de como puedo solucionar esto, le he estado dando vueltas pero no puedo colocar ese codigo en una funcion para poder llamarlo de alguna manera.
Necesito que se auto ejecute para que compruebe si hay o no nuevas notificaciones.

Gracias por el tiempo prestado

[emprear]

Consultá por el uso de setInterval()
http://www.w3schools.com/jsref/met_win_setinterval.asp

Saludos

[desoler]

Hola emprear,

Si, la función para actualizar cada x tiempo y como funciona la conozco, pero no es ese el problema. Lo que no se como hacer es una funcion que me ejecute el script que yo tengo, es decir (claro que no es asi) pero seria como:

function refrescaAutomaticamente();
{
(y aqui adentro mi script y que se ejecuta)
}

no se si me explico bien.

Gracias por tu tiempo

[emprear]

Es mas o menos asi
vos tenes esto

Código Javascript:

$('#show_html_notification').click(function () {
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification('html');
                    } else {
                        window.Notifications.requestPermission();
                    }
                });                             
            } else {
        alert('HTML 5 Notifications are not supported on this browser/OS.');
        }
        });
 

estás usando jQuery para que en el evento click se genere la notificación, vos decis que no necesitas de ese click. Entonces quitamos el click, definis una función, y le haces setInterval para que se ejecute cada minuto, o el tiempo que desees

Código Javascript:

function notificar(){      
        if (window.webkitNotifications) {
            window.Notifications = window.webkitNotifications;                              
 
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification('html');
                    } else {
                        window.Notifications.requestPermission();
                    }
                            
            } else {
        alert('HTML 5 Notifications are not supported on this browser/OS.');
        }
     
 }
 

<body onload="setInterval('notificar()', 60000"> --> 1 minuto
El alert indicando que el navegador no soporta el método, lo pondria fuera de la función notificar para que se ejecute solo una vez.

Te aclaro que tus funciones no las revisé, supongo que tu "casi", significa que están bien
SAludos

[desoler]

Hola emprear,

Lo voy a chequear y te digo.
La verdad que del "casi" funcionando, en realidad esta funcionando, el problema es que para ver la notificacion le tengo que dar click al boton de notificacion y asi no sirve, la idea es que cada ves que recibo una notificacion salte automaticamente, no se si me explico.
Funcionar, funciona y bien, pero manualmente, entonces pense, (o algo así) si en ves de darle click al boton puedo hacer que esa función se autoejecute cada x tiempo, al momento de recibir una nueva notificacion ya la veré por que al actualizarse la carga....

Lo chequeo y te digo, si sale un diez para vos...

Saludos y gracias por tu tiempo

[emprear]

Primero, te corrijo un error que cometí, me comí un parentesis final en

<body onload="setInterval('notificar()', 60000)">
Demo
http://emprear.com.ar/html5/noti.html

El automático esta solo para el boton "notify" (saque la script de otro lado)
Pero detecto un problema, para que Chrome te pida la autorización, si no uso el botón, no pasa nada, una vez que autoricé se recarga sin problemas. lo hice medio exagerado, cada 10 segundos

Saludos

[desoler]

Lo que haz echo esta fantastico.
Lo unico que no entiendo es, cual es el sentido de tenerlo en texto plain y html?
Se podria eliminar uno de estos no?, digo, para achicar el codigo.

[emprear]

Ahi la modifiqué para que veas que hace con html... (tenes que dar click al botón)
Tampoco hay que poner algo muy pesado, se sobreentiende que es para dar una información mínima, un pequeño logo con un texto y un link x ejemplo
Saludos

[desoler]

Hola emprear,

esto esta muy bien, pero que muy bien.
Me he pasado toda la noche pensando y me preguntaba.
De la forma que lo tengo yo ahora es la siguiente:
Yo utilizo la version html por que cargo un php, este php
se conecta a la BD y si el campo Notificacion recibe un dato(por medio de un form)
me muestra una leyenda y el usuario, si no hay dato la notificion se muestra igual
pero vacia.
Entonces he pensado que tal ves se pueda mezclar javascript y php.
Por ej. el script que tenemos de la notificacion se divide en dos partes (o tres si dejamos el texto plano).
esta:

Código Javascript:

if (!window.webkitNotifications) {
        alert('Sorry , your browser does not support desktop notification. Try Google Chrome.');
    }
        function RequestPermission (callback)
    {
        window.webkitNotifications.requestPermission(callback);
    }
 

que chequea si se permiten o no las notificaciones, y esta:

Código Javascript:

function notification ()
    { 
        if (window.webkitNotifications.checkPermission() > 0) {
            RequestPermission(HTMLnotification);
        }
        
        var popup = window.webkitNotifications.createHTMLNotification('content.php');
        popup.show();
        setTimeout(function()
        {
        popup.cancel();
        }, '20000');
    }
 

que ejecuta notificacion y si el permiso esta dado crea el pop up cargando el archivo php.

Ahora mi pregunta y duda es, de que forma se puede conectar con php, para que realize el setInterval pero que solo se muestre el popup si el campo notificacion de la BD tiene x dato?,
o sea, la linea

Código Javascript:

var popup = window.webkitNotifications.createHTMLNotification('content.php');
 

se tendría que ejecutar dentro de php para que cheque si hay datos y si hay que pase a la siguiente popup.show();

Por que aunque esto funciona bien en realidad es un bucle que cheque un campo de la BD y si tiene x dato lo muestra en el popup, cuando en realidad se tendría que mostrar cuando recibe un datos (email, ingreso en BD, ex).

Bueno, si tienes alguna idea o por donde puedo empezar a echarle mano te lo agradezco, yo creo que se podría crear un muy buen código de notificación que no existe del todo con javascript y php o por lo menos yo no lo conozco.

Saludos

[emprear]

Estamos llegando a un punto en que requiriría pruebas que ahora no tengo tiempo de hacer. solo te dejo la idea

hacés una consulta al php via ajax y segun los resultados, llamas a la función notificación() ó no (el setInterval sería para la llamada a ajax, no para la notificación)

Pero para serte sincero, en tanto esta api solo sea soportada al momento por Chrome, mucha importancia no le doy, se pueder hacer con javascript creando una capa que se muestre a intervalos

Saludos

[desoler]

ok, no había caído en la cuenta que solo funciona con chrome, pense que como era html5 y javascript funcionaba en cualquier browser.
Bueno, seguiré tirando así, dentro de todo me funciona igual.

Saludos y gracias