Usando a History API
Em versões antigas do HTML, nós tínhamos um controle limitado sobre o histórico do browser. Nós podíamos ir e voltar com os métodos disponíveis, mas era só isso.
Antes da existência da API de Histórico do HTML5, nós frequentemente usávamos valores de hash para modificar o conteúdo das páginas, especialmente as aplicações de uma única página, como por exemplo, aplicações de uma página com uso de AJAX, que permite uma comunicação assíncrona, ou seja, uma página principal é carregada, e quando um usuário interage em determinada área do site uma nova requisição é feita sem que o usuário precise esperar uma nova página ser carregada, interagindo somente com aquele trecho do site. Modificar a URL não era possível sem atualizar a página. Adicionalmente, quando você muda o valor de hash para a URL, isso não faz qualquer alteração ao histórico do browser.
Hoje em dia, Com a API de Histórico do HTML5, nós temos controle sobre o histórico do browser. E ela permite que seja possível desenvolver scripts pesados, aplicações de uma única página sem ter que modificar os valores de hash, e também oferece uma forma de adicionar uma entrada ao histórico, ou modificar a URL na barra de endereço, sem atualizar a página. Além disso, esta técnica nos permite reduzir a largura de banda.
Quanto ao suporte do Browser, nós podemos verificar o seu estado em: caniuse.com/#feat=history. Este link mostra uma visão rápida dos browsers suportados, mas é sempre boa prática detectar o suporte para determinada funcionalidade, antes de usá-la.
Manipular o histórico
O HTML5 providencia dois novos métodos: o history.pushState() e history.replaceState(). Ambos nos permitem adicionar e atualizar o estado do histórico, respectivamente, e funcionam da mesma maneira esperando o mesmo número de parâmetros.
Em adição a estes métodos, nós temos o evento popstate que é compreendido como:
stateque pode armazenar um JSON e este vai estar disponível para o eventopopstate.titleé um parâmetro que indica título e que pode ser definido comonull.urlpode representar qualquer URL, e será atualizado com o endereço dos browsers, e não se preocupa se aURL existe ou não. Mais importante, este não vai recarregar a sua página web.
As principais diferenças entre estes métodos é que o history.pushState vai adicionar uma nova entrada na pilha de histórico e o history.replaceState vai substituir o atual valor do histórico, em vez de adicionar um novo.
Até agora, nós falamos sobre os eventos history.pushState e history.replaceState de forma a controlar o histórico do browser, mas suponha que nós tenhamos uma variedade de falsas URL na pilha de histórico. O usuário poderia ou não ser redirecionado para a página. Nesse caso, este iria ser um problema quando o usuário clicasse no botão de voltar e avançar do browser para navegar pelo histórico de páginas.
Embora pudesse esperar que o método popstate fosse executado quando os métodos history.pushState ehistory,.replaceState fossem tratados, este não é o caso. Em vez disso o popstate será executado quando estiver navegando através da entrada do histórico da sessão, tanto por clicar nos botões para voltar avançar, ou usando os métodoshistory.go ou history.back.
Demonstração
Exemplo do método history.pushState
Suponha que http://medium.com/foo.html executa o seguinte javaScript:
Isso irá fazer com que a barra da URL mostre http://medium.com/bar.html, porém o browser não irá carregar bar.html, nem mesmo irá verificar se o mesmo existe.
Suponha agora que o usuário navegará para http://google.com, e então clicará no botão voltar do navegador. A barra de URL mostrará http://medium.com/bar.html, e a página receberá um evento popstate. A página será semelhante à foo.html, podendo modificar seu conteúdo durante o evento popstate .
Exemplo do método history.replaceState
Suponha que a partir do exemplo anterior, http://medium.com/foo.html executa a linha de código a seguir:
Isso irá fazer com que a barra de URL mostre http://medium.com/bar2.html, e o navegador também não irá carregar bar2.html, nem mesmo verificar se ele existe.
Suponha agora que o usuário novamente navegue para http://google.com, e clique no botão voltar do navegador. A barra de URL mostrará http://medium.com/bar2.html. Se o usuário clicar novamente no botão voltar, a barra de URL mostrará http://medium.com/foo.html, e irá ignorar totalmente bar2.html.
A página acima contém uma barra de abas, cada uma com um conteúdo específico que pode ser acessado clicando nas abas. Nós vamos carregar todos os recursos necessários no primeiro carregamento da página. De lá em diante, a aplicação irá apenas fazer o download de todo o conteúdo pedido, ou seja, em vez de carregar os recursos todas as vezes, irá carregar apenas os recursos necessários através de um segundo pedido de conteúdo.
Demonstração com o métodohistory.pushState : Clique aqui!
Demonstração com o métodohistory.replaceState : Clique aqui!
Note que o método history.pushState , adicionará o histórico de entradas ao browser, permitindo a navegação entre as páginas através dos botões voltar e avançar. E com o método history.replaceState , o histórico de entradas é atualizado no browser, não permitindo a navegação através dos botões voltar e avançar.
Caso ainda esteja confuso em relação a esses métodos, vamos demonstrar o mesmo caso de uma maneira melhor:
A imagem acima mostra como funciona cada método. Suponha que a pilha de blocos da esquerda é a pagina antes da execuçãodo método, e a pilha de blocos da direita é a página após a execução do método.
Note que com o método history.pushState , o bloco 3 é adicionado à pilha da direita, e passa a ser o novo topo.
Com o métodohistory.replaceState , o bloco 3 é adicionado no lugar no antigo topo da pilha da direita, no caso o bloco 2, sem aumentar a pilha, apenas atualizando o topo.
Conclusão
Esta API criou um grande impacto no que diz respeito a forma como a sua aplicação web funciona. Ela removeu as dependências de valores de hash nas URLS de forma que tornou-se mais fácil criar eficiência, e a aplicações de uma única página.
