javascript - strong - style html

Notificación HTML5 con PHP

Question

Noté que Facebook comenzó a usar la notificación de HTML5 para el escritorio y pensé que empezaría a usarlo por diversión para mi blog. Mi idea es bastante simple: sale un nuevo blog, Apache Cronwork se ejecuta cada X minutos y llama a un archivo, hace algo de magia de PHP y sale la notificación.

Busqué en línea y encontré ejemplos usando node.js y angular , pero no me siento cómodo usando ninguno de los dos, así que prefiero quedarme con PHP.

Aquí está mi proceso: el usuario va a mi blog y hará clic en un botón para permitir las notificaciones. Por brevedad, el siguiente código envía a los usuarios una notificación cuando hacen clic en el botón "notificar". Esto funciona perfectamente y, en teoría, debería suscribirse a cualquier notificación futura.

if (''Notification'' in window) {

function notifyUser() {
    var title = ''example title'';
    var options = {
        body: ''example body'',
        icon: ''example icon''
    };

    if (Notification.permission === "granted") {
        var notification = new Notification(title, options);
    } else if (Notification.permission !== ''denied'') {
        Notification.requestPermission(function (permission) {
            if (permission === "granted") {
                var notification = new Notification(title, options);
            }
        });
    }

}

$(''#notify'').click(function() {
    notifyUser();
    return false;
});

} else {
    //not happening
}

Puedes ver el fiddle de lo anterior.

Se concede acceso al usuario y ahora debería poder enviarles notificaciones cuando lo desee. ¡Increíble! Luego escribo una entrada de blog y tiene el ID de XYZ. Mi cronjob va y llama a la siguiente secuencia de comandos PHP, utilizando el ejemplo de node.js anterior como plantilla.

(En este ejemplo, solo llamo el script manualmente desde mi teléfono y veo la pantalla de mi escritorio. Dado que mi escritorio está "suscrito" al mismo dominio, creo que lo siguiente debería funcionar).

$num = $_GET[''num''];

$db = mysql_connect(DB_HOST, DB_USER, DB_PASS);
if($db) {
    mysql_select_db(''mydb'', $db);
    $select = "SELECT alert FROM blog WHERE id = ".$num." && alert = 0 LIMIT 1";
    $results = mysql_query($select) or die(mysql_error());
    $output = '''';
    while($row = mysql_fetch_object($results)) { 

        $output .= "<script>

        var title = ''new blog!'';
        var options = {
            body: ''come read my new blog!'',
            icon: ''same icon as before or maybe a new one!''
        };

        var notification = new Notification(title, options);

        </script>";

      $update = "UPDATE blog SET alert = 1 WHERE id = ".$num." && alert = 0 LIMIT 1";
      mysql_query($update) or die(mysql_error());

    }

    echo $output;

}

Luego verifico la base de datos y la entrada del blog. La "alerta" de XYZ ahora está configurada en "1", sin embargo, mi navegador de escritorio nunca fue notificado. Ya que mi navegador está suscrito a la misma URL que está empujando la notificación, me imagino que recibiría un mensaje.

O estoy haciendo algo mal (¿quizás PHP no es el lenguaje correcto para esto?), O estoy entendiendo mal la especificación. ¿Podría alguien ayudarme a señalarme en la dirección correcta? Creo que me estoy perdiendo algo.

Muchas gracias.

Actualización 1

De acuerdo con los comentarios, si simplemente llamo un script con esto en él:

 var title = ''new blog!'';
 var options = {
    body: ''come read my new blog!'',
    icon: ''same icon as before or maybe a new one!''
 };

  var notification = new Notification(title, options);

Debería golpear todos los dispositivos que están suscritos a mis notificaciones. Intenté esto en mi teléfono, pero mi escritorio aún no recibía una notificación. Sigo pensando que me falta algo, ya que mis notificaciones parecen estar pegadas a un dispositivo y solo se pueden activar en la carga de la página o al hacer clic en Facebook, que te envía notificaciones incluso si la página no está abierta en tu navegador.

Answer 1

Su problema es la falta de AJAX para conectar Javascript y PHP. La forma en que funciona su script PHP es ejecutando manualmente el script, por lo que solo el dispositivo que golpea ese script verá la notificación. No hay nada que envíe esa información a tu otro dispositivo en este momento.

Para explicar mejor el problema, es posible que su escritorio haya permitido el acceso a las notificaciones, pero no las recibe automáticamente. El código que ha proporcionado deberá usar AJAX para acceder a la URL del script, en lugar de usarlo como un trabajo cron.

En primer lugar, debe iniciar una solicitud repetida al script PHP para ver si ha habido alguna notificación actualizada. Si hay una nueva notificación, entonces necesita crear un nuevo objeto de notificación utilizando la respuesta devuelta.

En segundo lugar, debe modificar el script PHP para generar una cadena JSON en lugar del script de notificación.

Ejemplo de salida JSON:

{
  {
    title: ''new blog!'',
    options: {
      body: ''come read my new blog!'',
      icon: ''same icon as before or maybe a new one!''
    }
  },
  {
    title: ''another blog item!'',
    options: {
      body: ''come read my second blog!'',
      icon: ''hooray for icons!''
    }
  }
}

Sus notifyUsers() deben tomar el title y la option como argumentos en lugar de codificarlos:

function notifyUser(title, options) { ... }

Usando jQuery, obtenga la respuesta de PHP y cree la notificación:

function checkNotifications(){
  $.get( "/path/to/script.php", function( data ) {
    // data is the returned response, let''s parse the JSON string
    json = JSON.parse(data);

    // check if any items were returned
    if(!$.isEmptyObject(json)){
      // send each item to the notify function
      for(var i in json){
        notifyUser(json[i].title, json[i].options);
      }
    }
  });

  setTimeout(checkNotifications, 60000); // call once per minute
}

Ahora, solo necesita iniciar el sondeo de AJAX, así que agregue esto a su página web:

$(document).ready(checkNotifications);

¡Eso es practicamente todo! Solo faltaba la parte cuando su escritorio necesitaba recuperar las notificaciones. Sin embargo, tenga en cuenta que esto no se ha probado y es posible que necesite modificar algo.

Answer 2

usa lo siguiente

<button onclick="notifyMe()">Notify me!</button>

function notifyMe() {
  // Let''s check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let''s check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it''s okay let''s create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== ''denied'') {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let''s create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you 
  // want to be respectful there is no need to bother them any more.
}