by

You do know the nice message which is submitted to your smartphone when someone mentions you on Twitter?

iOS gets these messages via push. This means the server tells the app something like “Hey look, there’s something new on your Twitter-account”.
On Android this is done with push, too. It was introduced in version 2.1.0 in mid of July. Before this release they requested all Tweets via “pull”: The app asks the server “Yo server, somethin’ new here?”.

Draw-backs?

So where’s the difference besides the obvious?

  • with pull the app has to connect to the server in a certain time-interval
  • this means heigh power drain
  • it may take some time until you receive a message via pull*
  • push may hold an open connection to the server: more data is send

* Site note: I noticed that it also may take some time until a new message is delivered with push technology on iOS or Android (for Twitter-App). If anyone knows more on this issue please share your thoughts.

The way we do it today

If you’re coding an online app you have something where you’re displaying new messages or so. The known approach is to return asynchronously to the server via JavaScript and evaluate the answer. Something like this:

$.getJSON( 'messages.php' , function( data ) {
  // If there is a message
  if ( data.length > 0 ) {
    $.each( data['msg'], function() {
      // Do some fancy stuff with messages…
    });
  }
});

This is “pull”. It is not enough to request the answer of this file once, because this would evaluate the data only once. This is why there has to be a kind of timed event which fires the request in an interval.

This is what it could like with an intervall of 1 minute:

! function pull_request() {
  $.getJSON( 'messages.php' , function( data ) {
    // If there is a message
    if ( data.length > 0 ) {
      $.each( data['msg'], function() {
        // Do some fancy stuff with messages…
      });
    }
  });
 
  window.setTimeout( function() {
    pull_request();
  }, 1000 * 60 );
} ();

As you can see, there is an IIFE surrounding the code. I am doing this in order to call the timeout recursively. For more information please read Ben Almans article on this issue.

What else is possible

This will work totally fine. Let’s take a look at other possible ways.

The Wikipedia article about push sais:

Push technology, or server push, describes a style of Internet-based communication where the request for a given transaction is initiated by the publisher or central server.

With HTML5 the WHATWG introduces The WebSocket API.

WebSocket API

The WebSocket API enables websites and apps to communicate with a server. A polyfill for browsers that do not support WebSocket and as a framework you should definitely check out Socket.IO.

There were some definitions of this API in the spec that had some security problems and so browser vendors implemented some stuff that is outdated by now. There is a kinda “last call” specification for this API which are already implemented in Chrome dev channel (version 14) and Firefox 7. The API is available with a current version of Webkit so it should be in Safari soon.

Server-Sent Events

Furthermore there is the Server-Sent Event which is dedicated to fulfill push notifications. The event is already supported in stable versions of Safari, Chrome, Firefox and Opera. See When Can I Use… for more information.

The Server-Sent Event is a DOM event and can be accessed via new EventSource( file ); in JavaScript, while file is a server-file which publishes the notification. With the onmessage-event it is possible to listen to the changes of notifications.

var source = new EventSource( 'messages.cgi' );
source.onmessage = function( e ) {
  // do something with the notification, e.g. log it in the console.
  console.log( e.data );
}

Conclusion

With the given technologies it is possible to send notifications via push to the client-site. There are polyfills for “older” browsers (like pulling data). It is possible to use these tools today.

If you have any experience with the topic of pushing data, please share your thoughts and ideas in the comments.
Thanks for reading though.

I am going to develop a web-app with a friend of mine. We are using node.js for the server part. I am pretty exited to deal with it. We will definitely need something like a push event. We’ll see what will be best.

Read more and follow-up info:

  • Follow Ian Hickson on Twitter or Google+. He is the editor of the spec for Server-sent Events and The WebSocket API.
  • You should checkout the Modernizr Polyfill Wiki to get some information on polyfills for older browsers with WebSockets aso.
Hans Reinl

Written by Hans Reinl

Hans is a VP of Engineering with a passion for technology and a focus on leading and developing strong engineering teams. Committed to delivering high-quality products and driving business growth through technical excellence.