HTML5 History API and improving end user experience

When the AJAX wave came in 2005 when Jesse James Garrett coined the term and then everyone wanted it, one of the major shortcomings was that dynamic updates of only portions of a web page lead to inconsistent history handling and back/forward navigation button problems in web browsers and poor end user experiences. Enter the HTML5 History API.

The HTML5 History API aims to offer web developers a very simple way to push states of a web page into the history of the web browser, thus allowing the expected functionality to end users. You can make any change to the web page and then allow the user to bookmark or be able to get back to that later on, or just use back and forward navigation buttons to go between states.

The history object and states

For a long time, we have had a few options to manipulate the history object, belonging to the window object, through a couple of methods. Some people used its go method to offer navigation, like this:

window.history.go(1) or window.history.go(-1)

With the HTML5 History API we get two new methods: pushState and replaceState. They are ways to add states of web browsing history into your web browser. Don’t worry, it’s not any random history, but parts of the web site you are currently visiting.

Both methods offer three different parameters:

state
A JavaScript object for the new addition to the history.
title
The title for the entry – currently unused in some web browsers, but should be there for future compatibility.
URL
URL for the history entry, and it could be absolute or relative to the URL of the currently loaded web page.

Example code

This is how an example of utilizing the History API would look like:

var url = "http://robertnyman.com",
    title = "Robert's talk",
    state = {
        address : url
    };
window.history.pushState(state, title, url);

History API demo

I’ve put together a little HTML5 History API demo, as part of my HTML5 demos and samples, where you can see it in action and test how different web browsers behave with it (the demo is rudimentary, and does not support server redirects if you save the generated URLs for later). Below is also the code showcased.

Web browser support

The HTML5 History API is supported in:

  • Firefox 4+
  • Google Chrome
  • Safari 5+
  • Opera 11.50

There’s still no support in Internet Explorer, and there has been no trace or indication in the previews in IE10 that it will be added. For now, the History.js polyfill could prove to be a sufficient option for Internet Explorer, but I only see it as an interim solution.

Mozilla Hacks

I also recommend reading the Mozilla Hacks post about the History API, and if you are interested in contributing something interesting, you can also take part in the Mozilla Dev Derby competition.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>