If you have a site or application where content updates regularly, it can be nice to update the content for the user. Techmeme falls under that category, and they have at the top of their page:

<META HTTP-EQUIV="Refresh" CONTENT="1800">

The problem is that every now and then I come back to the browser and I see:

The refresh seems to be happening when network connectivity isn’t there and thus you get hit and the page dies. This isn’t a huge pain, you can manually refresh, but for some reason it bugs me a little.

What can you do? An ugly, error prone technique would be to test a connection before doing a refresh:

function pingRefresh() {
  var location = window.location;
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', location);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && (this.status == 0 || (this.status >= 200 && this.status < 300))) {
        window.location.reload();       
    }
  }
  xhr.send(null);
}
 
setTimeout(pingRefresh, 60000);

Or, it may make sense to be able to update part of the page (the main div or what have you) instead of asking the entire page to refresh. FriendFeed seems to do this and has:

var gFeedSpecs = {};
var gFeedAutoRefresh = [];
gFeedSpecs['feed1'] = {"start":0,"num":30,"type":2,"hash":"f003fa699d7e64b96f2b901922d13ed8"};
gFeedAutoRefresh.push('feed1');
$(function() { if (gFeedAutoRefresh) { autoRefresher.start(120000); maybeRestoreHtml() } });

Other Frustrating User Experiences

• Tough Captchas
• iPhone Mail.app inbox switching
• Wordpress Categories
• Michael Mahemoff: Olympics Medal Count
• Boulder Parking Tickets
• Wordpress Media Upload
• Red Carpet Club