Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API

Nota: apenas traduzi o texto abaixo e postei aqui.

Você pode usar a propriedade window.location.href para atualizar a URL do navegador.

window.location.href = 'http://minha-nova-url.com';

Mas usar essa abordagem faz com que a página seja recarregada. E se você quiser atualizar a URL sem atualizar a página?

Hoje, vamos dar uma olhada na History API.

A History API

A API History é um conjunto de métodos no history object que pode ser usado para manipular o histórico — aquilo que é acessado pelos botões de avançar e retroceder — do navegador.

Funciona em todos os navegadores modernos e até no IE 10.

O método history.pushState()

O método history.pushState() pode ser usado para inserir uma nova entrada no histórico do navegador — e, como resultado, atualizar a URL exibida — sem atualizar a página.

Ele aceita três argumentos:

• state, um object com alguns detalhes abre a URL ou entry no histórico do navegador.
• title, que deveria ser o que a propriedade document.title deveria ser (mais sobre isso em breve).
• url, a URL para adicionar ao histórico do navegador.

Um exemplo

Este método é útil principalmente com app de página única, onde você carrega conteúdo com JavaScript, mas deseja atualizar a URL para corresponder.

Por exemplo, digamos que você estava na homepage e deseja alterar a URL para refletir a página "about". Você pode fazer algo assim:

history.pushState({ pageID: 'about' }, 'Sobre', '/about');

Se desejar, você pode ir para a homepage do meu site, copiar/colar na console tab nas developer tools e executar isso.

Algumas pegadinhas

Como muitos métodos JavaScript, o método history.pushState() tem algumas pegadinhas.

Alguns navegadores impõem um limite de 640.000 caracteres no state object. Se você precisar passar dados de uma "view" para outra, e esses dados forem grandes, em vez disso, você deve usar um object vazio aqui e salvar esses dados com localStorage ou sessionStorage.

O atributo title é obrigatório, mas ignorado por todos os navegadores. Provavelmente nem deveria existir, mas foi originalmente fornecido com a API e não pode ser removido sem quebrar os sites que o utilizam.

Com base nessas duas coisas, o argumento mais importante, url, provavelmente deveria ser o primeiro, já que é o único que você realmente precisa para fazer o que deseja. Mas por alguma razão, é o último.

Independentemente disso, o método history.pushState() é incrivelmente útil para determinadas situações.

Outras coisas que você pode fazer com a History API

O popstate event

Se você usar history.pushState() para atualizar a URL, quando o usuário clicar nos botões de avançar ou retroceder, a URL mudará, mas a IU não.

Você pode usar o método popstate para detectar essas alterações de URL e fazer alterações na interface do usuário conforme necessário.

window.addEventListener('popstate', function (event) {
    // A URL mudou...
});

Antes aprendemos que a primeira propriedade passada para o método history.pushState() é state. Você pode acessar essa propriedade no event object.

window.addEventListener('popstate', function (event) {
    // Loga os dados de state no console
    console.log(event.state);
});

Avançando e retrocedendo no History

Você também pode avançar e retroceder no histórico do navegador com alguns outros métodos na History API.

O método history.back() volta uma página e o método history.forward() avança uma página.

Você pode avançar ou retroceder mais de uma página usando o método history.go(). Passe o número de páginas para pular. Use um número positivo para avançar e um número negativo para retroceder.

// volta 2 páginas
history.go(-2);

// avança 3 páginas
history.go(3);

Compatibilidade de navegadores

O popstate event e os métodos back(), forward() e go() funcionam em todos os navegadores modernos e até o IE 10.

Fonte

Newsletter de Go Make Things