Good tutorial for using HTML5 History API (Pushstate?) [closed]

For a great tutorial the Mozilla Developer Network page on this functionality is all you'll need: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Unfortunately, the HTML5 History API is implemented differently in all the HTML5 browsers (making it inconsistent and buggy) and has no fallback for HTML4 browsers. Fortunately, History.js provides cross-compatibility for the HTML5 browsers (ensuring all the HTML5 browsers work as expected) and optionally provides a hash-fallback for HTML4 browsers (including maintained support for data, titles, pushState and replaceState functionality).

You can read more about History.js here:https://github.com/browserstate/history.js

For an article about Hashbangs VS Hashes VS HTML5 History API, see here:https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

I benefited a lot from 'Dive into HTML 5'. The explanation and demo are easier and to the point.History chapter - http://diveintohtml5.info/history.htmland history demo - http://diveintohtml5.info/examples/history/fer.html

Keep in mind while using HTML5 pushstate if a user copies or bookmarks a deep link and visits it again, then that will be a direct server hit which will 404 so you need to be ready for it and even a pushstate js library won't help you. The easiest solution is to add a rewrite rule to your Nginx or Apache server like so:

Apache (in your vhost if you're using one):

<IfModule mod_rewrite.c>    RewriteEngine On    RewriteBase /    RewriteRule ^index\.html$ - [L]    RewriteCond %{REQUEST_FILENAME} !-f    RewriteCond %{REQUEST_FILENAME} !-d    RewriteRule . /index.html [L] </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;