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

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 solution • Only accessible to the client • Doesn’t work without JavaScript • Can’t use browser in-page links • It’s a hack

History API Spec • Two additional window.history methods • One additional window event

Push State window.history.pushState(data, title, path);

Replace State window.history.replaceState(data, title, path);

Pop State window.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 content • Back-end returns only HTML • Push/replace state Github is a great example demo

Browser Support

History.js • Abstraction layer • History.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?

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