Those Who Control The Past Control The Future: The HTML5 History API Sean Adkinson 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 Internet ExplorerNone Firefox4.0+ Safari5.0+ Chrome8.0+ Opera iPhone AndroidNone

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

References

Sean Adkinson Jama

Questions?