1. Those Who Control The Past Control The Future: The HTML5 History API Sean Adkinson (@seanadkinson) Jama Software 2012 HTML5 Developer Conference

2. What is it? The HTML5 History API gives JavaScript the ability to control the browser’s URL …without reloading the page

3. 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

4. “#!” 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

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

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

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

8. Pop State window.onpopstate = function(event); demo

9. 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

10. Multi-Page Strategy Intercept link clicks Retrieve and display content Back-end returns only HTML Push/replace state Github is a great example demo

11. Browser Support Internet ExplorerNone Firefox4.0+ Safari5.0+ Chrome8.0+ Opera11.50+ iPhone4.2.1+ AndroidNone

12. 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

13. References http://diveintohtml5.info/history.html http://html5doctor.com/history-api/ https://github.com/balupton/History.js/

14. Sean Adkinson Jama Software @seanadkinson

15. Questions?