Those Who Control The Past Control The Future:The HTML5 History API

Sean Adkinson (@seanadkinson)

Jama Software

2012 HTML5 Developer Conference

What is it?

The HTML5 History API gives JavaScript the ability to control

the browser’s URL

…without reloading the page

Why History API now?

AJAX and single-page applications

New resources should have new URLs

The History API gives you the ability to use AJAX, and maintain proper URLs

“#!” Solution

Uses browser in-page link functionality

Problems with this solutionOnly accessible to the clientDoesn’t work without JavaScriptCan’t use browser in-page linksIt’s a hack

History API Spec

Two additional window.history methods

One additional window event

Push Statewindow.history.pushState(data, title,

path);

Replace Statewindow.history.replaceState(data,

title, path);

Pop Statewindow.onpopstate =

function(event);

demo

Single-Page Strategy

URL State, one-to-one

When state is changed, push new corresponding URL

On pop state (and initial page load), display based on URL State

If starting a new project, just use a framework like Backbone

demo

Multi-Page Strategy

Intercept link clicks

Retrieve and display contentBack-end returns only HTML

Push/replace state

Github is a great exampledemo

Browser SupportInternet Explorer None

Firefox 4.0+

Safari 5.0+

Chrome 8.0+

Opera 11.50+

iPhone 4.2.1+

Android None

History.js

Abstraction layerHistory.pushState(data, title, url);History.replaceState(data, title, url);window.onstatechange

URLs can be pasted between IE Firefox

Adapters for jQuery, Zepto, MooTools, more

http://bit.ly/historyjs

References

http://diveintohtml5.info/history.html

http://html5doctor.com/history-api/

https://github.com/balupton/History.js/

Sean Adkinson

Jama Software@seanadkinson

Questions?