Chrome/Safari (webkit) + real-time push = always loading indicator

By Phil Leggetter On June 4, 2010 · 1 Comment

With real-time push becoming mainstream more and more developers are going to start adding real-time push to their website. One minor user experience hurdle still to be fully solved for webkit based browsers is the “always loading indicator” which can appear if a streaming connection has been established to a push server or service. This indicator appears due to the streaming connection that has been established between JavaScript in the web browser, using an XMLHttpRequest object, where you are effectively continually loading, or waiting, for content from the push server.

See and download the full gallery on posterous

It makes sense that webkit-based browsers do something to detect if a page has loaded and then stop displaying the loading indicator. However, it’s still a bit unclear what determines if the loading indicator will be shown when a streaming connection is established from JavaScript. Following a bit of googling and some tinkering it would appear that you can stop the loading indicator if you establish your streaming connection after all other page content has loaded. Oh, it’s easy then? Nope! Determining when all page content has loaded doesn’t appear to be as simple as you would think.

To save some time I tried establishing my streaming connection to Kwwika at different points in the page loading process using the jQuery library:

DomContentReady via the .ready() jQuery function (also see $(calback))
window.onload via the .load() jQuery function

Google Chrome
When connecting within the .ready() callback the loading indicator would always appear.

$(document).ready(function()
{
    var oConn = kwwika.Service.connect();
});

However, if you use the .load() callback 99% of the time the loading indicator would disappear after the page was loaded and then the real-time push connection would be established.

$(window).load(function()
{
    var oConn = kwwika.Service.connect();
});

Safari
In Safari the results when using the .ready() callback were exactly the same.

For the .load callback I had to introduce an additional wait using window.setTimeout in order to lose the loading indicator.
$(window).load(setTimeout(function()
{
var oConn = kwwika.Service.connect();
}, 10000));

If the .load() solution worked for both webkit-based browsers then I’d be happy to say that this problem has been resolved. However, having to add a random timeout to lose the loading indicator in Safari means that, for now, I think this is going to be a continuing annoyance for developers and will also impact the real-time push web application user experience by suggesting to users that the web application has not fully loaded.

Permalink

| Leave a comment »