Using SPA (Single page application) and browser back button

Question

Someone who works with SPA knows the best way to work with the back button of the browser?

For example, we have a list of users and the detailing of these users through a click. When we are on the "page" of detailing some user we need to, when clicking the back button of the browser, return to the list of users.

Answer 1

There are two ways to do this:

Hash Links

It is given by the use of hash links, such as www.meusite.com#conteudo. Whereas conteudo changes every transition you want to be returnable. For example: you would have site.com#listagem and when to click it will must change to site.com#detalhamentoItem=15. This technique takes advantage of the fact that everything after the '#' is considered anchor and does not cause a page reload.

Pros

• The pro of this method is compatibility, because it works since the 90s.
• Works great for pages that are written purely in js (without backend).

Cons

• "Ugly links";
• Watching the hash change can be extremely tiring on older browsers (and ignoring them takes away your advantage). However there are dozens of libraries that do this dirty work for you. Personally, I like the http://plugins.jquery.com/hashchange/ and used it in some projects.

HTML5 history API

Newer method that allows full url control. See more in http://diveintohtml5.info/history.html

Pros

• Perfect when your server can generate a page like site.com?detalhamento=15 or site.com/detalhamento/15, but can also serve the result via AJAX (which saves bandwidth). So you have the speed of ajax without losing the browsing by history;
• Total control of the url that will be as beautiful as your server and your creativity allow.

Against

• Using this method is almost impossible without a serverside language;
• It’s Html5. Say goodbye to compatibility.