Uma Introdução à API de Histórico do HTML5

Histórico é sempre interessante, não é? Em versões antigas do HTML, nós tínhamos um controlo limitado sobre o histórico do browser. Nós podíamos ir para trás e para a frente com os métodos disponíveis, mas era isso.

Com a API de Histórico do HTML5, nós temos controlo sobre o histórico do browser. Por exemplo, nós temos uma forma de adicionar uma entrada ao histórico, ou modificar o URL na barra de endereço, sem actualizar a página.

Porquê a API de Histórico?

Neste artigo, nós iremos aprender o porquê da API de Histórico do HTML5. Antes da existência desta API, nós frequentemente usávamos valores de hash para modificar o conteúdo das páginas, especialmente as mais “pesadas”, aplicações de uma única página porque modificar o URL não era possível sem actualizar a página. Adicionalmente, quando tu mudas o valor de hash para o URL, isso não faz qualquer alteração ao histórico do browser. 

Agora, contudo, ambas estas coisas estão disponíveis com a API de Histórico do HTML5 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. Também permite-nos construir aplicações que sejam benéficas no que diz respeito ao SEO. Além disso, esta técnica permite-nos reduzir a largura de banda – mas como? 

Neste artigo, nós vamos desenvolver uma aplicação de uma única página com esta API para demonstrar exactamente isso

Isto significa que 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. Em outras palavras, em vez de carregar todos os recursos todas as vezes, este irá carregar apenas os recursos necessários através de um segundo pedido de conteúdo. 

Nota que tu necessitas de fazer algum código do lado do servidor, para entregar apenas parte dos recursos em vez do conteúdo completo da página.

Suporte do browser

No momento da escrita deste artigo, o suporte do browser da API de histórico do HTML5 é bastante bom. Nós podemos rever o seu estado Aqui. Este link irá dar-te uma visão rápida dos browsers suportados, mas é sempre boa prática detectar o suporte para determinada funcionalidade, antes de usá-la. 

Para determinar de forma programática se o teu browser suporta esta API, usa a seguinte linha de código:

1

return !!(window.history && history.pushState);

Adicionalmente, eu sugeriria ver este artigo Detecção de suporte de várias funcionalidades do HTML5.

Se tu estás a usar Modernizr, então tu deverias estar a usar o código abaixo:

1

if (Modernizr.history) {

2

// History API Supported 

3

}

Se o teu browser não suporta o API do histórico, então tu podes usar o history.js polyfills.

Manipular o histórico

O HTMLS providencia dois novos métodos:

1. history.pushState() 
2. history.replaceState()

Ambos nos permitem adicionar e actualizar o estado do histórico, respectivamente. Ambos funcionam da mesma maneira e esperam o mesmo número de parâmetros. Em adição a estes métods, nós temos o evento popstate. Nós iremos ver mais tarde neste artigo para como e quando vamos usar este evento popstate.

pushState e replaceState ambos esperam o mesmo número de parâmetros que estão conforme:

1. state pode armazenar uma string Json e está irá estar disponível para o eventopopstate.
2. title é um parâmetro que é ignorado pela maioria dos browsers por agora, assim é melhor defini-lo null por agora.
3. url pode representar qualquer URL, será actualizado com o endereço do browsers, e não se preocupa se o URL, existe ou não. Mais importante, este não ira recarregar a tua página web.

As principais diferenças entre estes métodos é que o pushState irá adicionar uma nova entrada a stack do histórico e oreplaceState irá substituir o actual valor do histórico, em vez de adicionar um novo. Se tu ainda estás confuso com estes métodos, vamos demonstrar o mesmo caso com um exemplo melhor.

Vamos assumir que nós temos stacks de dois blocks chamados de 1 e 2 e tu tens um block chamado 3 na tua mão. Agora quando nós executamos pushState, o bloco 3 irá ser adicionado a existente stack, assim a stack irá ter 3 blocos.

Agora assume que temos a mesma stack com dois blocos e um a mais na tua mão. Quando nós executamos replaceState, este irá pegar no bloco 2 da stack e retirá-lo e colocar o bloco 3. Assim o número de valores do histórico irá permanecer o mesmo. pushState, por outro lado, aumenta o contador do histórico em um. 

A imagem abaixo mostra a mesma demonstração.

Até agora, nós falamos sobre os eventos pushState e replaceState de forma a controlar o histórico do browser, mas supõe que nós tínhamos uma variedade de falso histórico do browser que nós tínhamos contado no browser. O utilizador poderia ou não ser redireccionado para a página. Em tal caso, este iria ser um problema quando o utilizador carrega-se no botão de recuar e avançar do browser para navegar pelo histórico de páginas.

Embora pudesses esperar que o método popstate fosse executado aquando dos métodos pushState os replaceState methods são tratados, mas na realidade, este não é o caso. Em vez disso o popstate será executado quando estás a navegar através da entrada do histórico da sessão, tanto por carregar nos botões para a frente e para trás, ou usando os métodoshistory.go ou history.back.

Em browsers WebKit, um evento popstate seria executado depois do evento onload do documento, mas o Firefox e o IE não tem este comportamento.

Demonstração

O HTML

1

<div class="container">

2

<div class="row">

3

  	<ul class="nav navbar-nav">

4

			<li><a href="home.html" class="historyAPI">Home</a></li>

5

			<li><a href="about.html" class="historyAPI">About</a></li>

6

			<li><a href="contact.html" class="historyAPI">Contact</a></li>

7

		</ul>

8

	</div>

9

	<div class="row">

10

		<div class="col-md-6">

11

			<div class="well">

12

				Click on Links above to see history API usage using <code>pushState</code> method.

13

			</div>

14

		</div>

15

		<div class="row">    

16

			<div class="jumbotron" id="contentHolder">

17

				<h1>Home!</h1>

18

				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

19

			</div>

20

		</div>

21

	</div>

22

</div>

The JavaScript

1

<script type="text/javascript">

2

jQuery('document').ready(function(){

3

4

		jQuery('.historyAPI').on('click', function(e){

5

			e.preventDefault();

6

			var href = $(this).attr('href');

7

8

			// Getting Content

9

			getContent(href, true);

10

11

			jQuery('.historyAPI').removeClass('active');

12

			$(this).addClass('active');

13

		});

14

15

	});

16

17

	// Adding popstate event listener to handle browser back button  

18

	window.addEventListener("popstate", function(e) {

19

20

		// Get State value using e.state

21

		getContent(location.pathname, false);

22

	});

23

24

	function getContent(url, addEntry) {

25

		$.get(url)

26

		.done(function( data ) {

27

28

			// Updating Content on Page

29

			$('#contentHolder').html(data);

30

31

			if(addEntry == true) {

32

				// Add History Entry using pushState

33

				history.pushState(null, null, url);	

34

			}

35

36

		});

37

	}

38

</script>

Demonstração 1: API do Histórico do HMTL5 - pushState

Nesta demonstração, tu irás aperceber-te que o histórico de entradas estão a ser contadas no browser e que tu podes navegar através delas usando o botão do browser retroceder/avançar. Ver demonstração

Demonstração 2: API do Histórico do HMTL5 - replaceState

Nesta demonstração, tu irás aperceber-te que o histórico de entradas estão a ser actualizadas nos browsers e que tu não podes navegar através delas usando o botão do browser retroceder/avançar. Ver demonstração

Conclusão

Esta API criou um grande impacto no que diz respeito a forma como a tua aplicação web funciona. Esta removeu as dependências de valores de hash nos URLS de forma a ser fácil criar eficiência, ser benéfica no que diz respeito a SEO, e a aplicações de uma única página. 

É uma API realmente interessante, não é?

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!