How do push notifications work?

Question

I\'m trying to implement push notifications on my PHP-based website. The goal is to make something similiar to what Stackoverflow and other sites have which notify a user in

Answer 1

Working

HTML5rocks have provided a good explanation here, about how websockets work.

Well you can make use of Websockets for the browsers that support it (since all modern browsers provide good support)

Getting Started

You can get started with these few resources :

HTML5rocks

Nettuts+

Nettuts+ provide a good tutorial for getting started with websockets.

For Browsers Supporting Websockets

Fallback

You can use Modernizr to detect whether the Client's browser has support for websockets or not & as a fallback you can make use of flash instead of Websockets.

For those projects, when running on browsers with no WebSockets or with it disabled, web-socket-js will be used. It will be less efficient than native, but still much lower latency than long-polling.

Any browser with Flash can support WebSocket using the web-socket-js shim/polyfill.

Reference:

Alternative to WebSockets

https://softwareengineering.stackexchange.com/questions/33713/is-there-an-alternative-to-html-web-sockets-now-that-firefox-4-has-disabled-the

Answer 2

I just wanted to share the actual implementation I went with. I decided to go with a great SAAS, Pusher, since there are many challenging issues in implementing Push notifications, as I realized in reading the links in @Virendra's excellent answer, that Pusher solves for you.

What I was most impressed with is how little code you have to write to make this work. See below. My server-side is in PHP (Pusher has libraries in many languages).

require('/application/thirdParty/pusher-html5-realtime-push-notifications/lib/squeeks-Pusher-PHP/lib/Pusher.php');
require('/application/thirdParty/pusher-html5-realtime-push-notifications/config.php');
$pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);

foreach($recipients as $row){                   
  $channel='my-channel'.$row->recipient_id;
  $pusher->trigger($channel, 'notifications', 
    array('message' => $row->message,
          'notification_id' => $row->notification_id) 
  );
}

Here's the HTML/JS (don't be overwhelmed, most of this code is just to populate the little circle and the list with the incoming notification as Stackoverflow and others do it):

<script src="/application/thirdParty/pusher.min.js"></script>
<script>     
var myID=179; // would receive notification if myID matches $row->recipient_id above;
var myChannel = pusher.subscribe('my-channel'+myID);
myChannel.bind('notifications',
  function(data) {
        var message=String(data.message),
            url='/notifications/'+data.notification_id, 
            icon='<i class=\'icon-heart\'></i>',
            urlText=icon+message;

        var notificationRow='<li><a href='+url+'>'+urlText+'</a></li>';
         $('#notificationsDropdownList').prepend(notificationRow);   

        if(notificationCircleCount==0){
             notificationCircleCount++;
              $notificationCircle.show();
               $notificationCircleCount.html(notificationCircleCount);
        }
        else{
             notificationCircleCount++;
             $notificationCircleCount.html(notificationCircleCount);
        }
        console.log('Pusher happened'+data.message);                  
  } //function
); //myChannel
</script>