Notifica HTML5 con PHP

Question

Ho notato che Facebook ha iniziato a utilizzare la notifica HTML5 per desktop e ho pensato di iniziare a dilettarci per divertirmi sul mio blog. La mia idea è piuttosto semplice: esce un nuovo blog, cronache di apache esegue ogni X minuti e chiama un file, esegue alcune magie PHP e esce la notifica.

Ho cercato online e ho trovato degli esempi usando node.js and angular, ma non mi sento a mio agio nell'utilizzare entrambi, quindi preferisco attenermi a PHP.

Ecco il mio processo: l'utente visita il mio blog e fa clic su un pulsante per consentire le notifiche. Per brevità, il codice sottostante invia agli utenti una notifica quando fanno clic sul pulsante "notifica". Questo funziona perfettamente, e in teoria dovrebbe iscriverli a eventuali notifiche future.

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 
} 

È possibile vedere il fiddle di quanto sopra.

L'accesso all'utente è concesso e ora dovrei essere in grado di inviare loro le notifiche ogni volta che voglio. Eccezionale! Quindi scrivo un post di blog e ha l'ID di XYZ. Il mio cronjob va e chiama il seguente script PHP, usando l'esempio node.js sopra come modello.

(In questo esempio io sono solo chiamando lo script manualmente dal mio telefono e guardando lo schermo del desktop. Dal momento che il mio tavolo è "sottoscritto" per lo stesso dominio, penso che il seguente sarebbe/dovrebbe funzionare.)

$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; 

} 

Poi controllo il database e la voce del blog L'avviso di XYZ è ora impostato su "1", tuttavia il mio browser desktop non è mai stato avvisato. Dal momento che il mio browser è iscritto allo stesso URL che sta inviando la notifica, immagino che otterrei un messaggio.

O sto facendo qualcosa di sbagliato (forse PHP non è la lingua giusta per questo?), O sto fraintendendo le specifiche. Qualcuno potrebbe aiutarmi a indicarmi la giusta direzione? Penso che mi manchi qualcosa.

Grazie mille.

Update 1

Secondo i commenti, se mi limito a chiamare uno script con questo in esso:

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); 

Si dovrebbe colpire tutti i dispositivi che hanno sottoscritto le notifiche. Ho provato questo sul mio telefono ma il mio desktop non ha ancora ricevuto una notifica. Continuo a pensare che manchi qualcosa perché le mie notifiche sembrano bloccate su un dispositivo e possono essere richiamate solo a caricamento di pagina o su clic anziché su Facebook che invia notifiche anche se la pagina non è aperta nel browser.

Answer 1

Il tuo problema è la mancanza di AJAX per collegare Javascript e PHP. Il modo in cui funziona lo script PHP è eseguendo manualmente lo script, quindi solo il dispositivo che ha colpito lo script vedrà la notifica. Non c'è nulla che in realtà manda queste informazioni al tuo altro dispositivo in questo momento.

Per spiegare meglio il problema, è possibile che il desktop abbia consentito l'accesso alle notifiche, ma non inserisce automaticamente tali notifiche. Il codice che hai fornito dovrà usare AJAX per raggiungere l'URL dello script, invece di usarlo come un cron job.

Prima di tutto, è necessario avviare una richiesta ripetuta per lo script PHP per verificare se è stata inviata una notifica aggiornata. Se è presente una nuova notifica, è necessario creare un nuovo oggetto di notifica utilizzando la risposta restituita.

In secondo luogo, è necessario modificare lo script PHP per generare una stringa JSON anziché lo script di notifica.

JSON output di esempio:

{ 
    { 
    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!' 
    } 
    } 
} 

tuo notifyUsers() dovrebbe prendere title e option come argomenti invece di loro hardcoding:

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

utilizzando jQuery, ottenere la risposta PHP e creare la notifica:

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 
} 

Ora, non vi resta che kickstart il polling AJAX, quindi aggiungere questo alla tua pagina web:

$(document).ready(checkNotifications); 

che è praticamente esso! Ti mancava solo la parte quando il tuo desktop aveva bisogno di inserire le notifiche. Attenzione però, questo non è testato e potrebbe essere necessario cercare qualcosa.

Answer 2

utilizzare la seguente

<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. 
}