HTML5 Notification With PHP

Question

I noticed Facebook started using the HTML5 notification for desktop and I thought I would start dabbling in it for fun for my blog. My idea is pretty simple: new blog comes out, apache cronjob runs every X minutes and calls a file, does some PHP wizardry and out goes the notification.

I have looked online and found examples using node.js and angular, but I'm not comfortable using either of those so I'd rather stick with PHP.

Here is my process: The user goes to my blog and will click a button to allow notifications. For brevity, the below code sends the users a notification when they click the "notify" button. This works perfectly, and in theory should subscribe them to any future notifications.

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
}

You can see the fiddle of the above.

Access to the user is granted and now I should be able to send them notifications whenever I want. Awesome! I then write up a blog entry and it has the ID of XYZ. My cronjob goes and calls the following PHP script, using the above node.js example as a template.

(In this example I am just calling the script manually from my phone and watching my desktop screen. Since my desktop is "subscribed" to the same domain, I think the following would/should work.)

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

}

I then check the database and blog entry XYZ's "alert" is now set to "1", yet my desktop browser never got notified. Since my browser is subscribed to the same URL that is pushing out the notification, I would imagine I'd get a message.

Either I'm doing something wrong (perhaps PHP isn't the right language for this?), or I'm misunderstanding the spec. Could somebody help point me in the right direction? I think I'm missing something.

Thanks a lot.

Update 1

According to the comments, if I just call a script with this in it:

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

It should hit all devices that are subscribed to my notifications. I tried this on my phone but my desktop still didn't get a notification. I still think I'm missing something as my notifications seem stuck to one device and can only be called on page-load or on click as opposed to Facebook which sends you notifications even if the page isn't open in your browser.

Answer 1

Your problem is the lack of AJAX to connect Javascript and PHP. The way your PHP script works is by manually running the script, so only the device hitting that script will see the notification. There is nothing that actually sends that info to your other device right now.

To better explain the problem, your desktop may have allowed access to the notifications, but it doesn't automatically pull in those notifications. The code you have provided will need to use AJAX to hit the script URL, instead of using it as a cron job.

First off, you need to start a repeating request to the PHP script to see if there has been any updated notification. If there is a new notification, then you need to create a new notification object using the returned response.

Second, you need to alter the PHP script to output a JSON string rather instead of the notification script.

JSON output example:

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

Your notifyUsers() should take title and option as arguments instead of hardcoding them:

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

Using jQuery, get the PHP response and create the notification:

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
}

Now, you just need to kickstart the AJAX polling, so add this to your webpage:

$(document).ready(checkNotifications);

That's pretty much it! You were just missing the part when your desktop needed to pull in the notifications. Heads up though, this isn't tested and you may need to tweek something.