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 = "https://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.
History.js not only provides support for older browsers, but it fixes the cross-compatibility bugs with the modern browsers – WHICH ALL IMPLEMENT IT DIFFERENTLY! You can read about how every browser buggers it up here: https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API
History.js is essential for the HTML5 History API to work consistently across the different browsers.
Benjamin,
Great, thanks for mentioning that!