Bom tutorial para usar a API de histórico do HTML5 (Pushstate?) [Fechado]

Estou pensando em usar a API de histórico do HTML5 para resolver problemas de vínculo profundo com o conteúdo carregado com AJAX, mas estou lutando para sair do papel. Alguém sabe de bons recursos?

Eu quero usar isso, pois parece uma ótima maneira de permitir a possibilidade de aqueles que estão sendo enviados, os links podem não ter o JS ativado. Muitas soluções falham quando alguém com JS envia um link para alguém sem.

Minha pesquisa inicial parece apontar para uma API de histórico no JS e o método pushState.

http://html5demos.com/history

Para um ótimo tutorial, a página da Mozilla Developer Network sobre essa funcionalidade é tudo que você precisa: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Infelizmente, a API de histórico do HTML5 é implementada de maneira diferente em todos os navegadores HTML5 (tornando-o inconsistente e com bugs) e não possui substituto para os navegadores HTML4. Felizmente, o History.js fornece compatibilidade cruzada para os navegadores HTML5 (garantindo que todos os navegadores HTML5 funcionem conforme o esperado) e, opcionalmente, fornece um fallback de hash para navegadores HTML4 (incluindo suporte mantido para dados, títulos, funcionalidade pushState e replaceState).

Você pode ler mais sobre o History.js aqui: https://github.com/browserstate/history.js

Para obter um artigo sobre a API de histórico Hashbangs VS Hashes VS HTML5, consulte aqui: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Eu me beneficiei muito com 'Dive into HTML 5'. A explicação e a demonstração são mais fáceis e objetivas. Capítulo Histórico - http://diveintohtml5.info/history.html e demonstração do histórico - http://diveintohtml5.info/examples/history/fer.html

Lembre-se de usar o HTML5 pushstate se um usuário copiar ou adicionar um link direto aos favoritos e visitá-lo novamente; isso será um acesso direto ao servidor, que será 404; portanto, você deve estar pronto para isso, e mesmo uma biblioteca pushstate js não ajudará. vocês. A solução mais fácil é adicionar uma regra de reescrita ao servidor Nginx ou Apache da seguinte maneira:

Apache (no seu vhost, se você estiver usando um):

<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;

A especificação do histórico do HTML5 é peculiar.

history.pushState()não despacha um popstateevento ou carrega uma nova página por si só. Era apenas para empurrar o estado para a história. Este é um recurso "desfazer" para aplicativos de página única. Você deve despachar manualmente um popstateevento ou usar history.go()para navegar para o novo estado. A idéia é que um roteador possa ouvir popstateeventos e fazer a navegação por você.

Algumas coisas a serem observadas:

• history.pushState()e history.replaceState()não despache popstateeventos.
• history.back(), history.forward()E as costas do navegador e botões de avançar fazer expedição popstateeventos.
• history.go()e history.go(0)recarregue a página inteira e não envie popstateeventos.
• history.go(-1)(voltar 1 página) e history.go(1)(avançar 1 página) enviam popstateeventos.

Você pode usar a API do histórico como esta para enviar um novo estado E enviar um evento popstate.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Em seguida, ouça popstateeventos com um roteador.

Você pode experimentar o Davis.js , ele fornece roteamento em seu JavaScript usando pushState quando disponível e sem JavaScript, permite que o código do lado do servidor lide com as solicitações.

Aqui está um ótimo roteiro do Ryan Bates sobre railscasts. No final, ele simplesmente desabilita a funcionalidade ajax se o método history.pushState não estiver disponível:

http://railscasts.com/episodes/246-ajax-history-state

Você pode dar uma olhada neste plugin jQuery. Eles têm muitos exemplos em seu site. http://www.asual.com/jquery/address/

Eu escrevi uma abstração de roteador muito simples sobre o History.js, chamada StateRouter.js . Está nos estágios iniciais de desenvolvimento, mas estou usando-o como a solução de roteamento em um aplicativo de página única que estou escrevendo. Como você, achei o History.js muito difícil de entender, especialmente porque eu sou bastante novo em JavaScript, até entender que você realmente precisa (ou deveria ter) uma abstração de roteamento sobre ela, pois resolve um nível baixo problema.

Este exemplo de código simples deve demonstrar como é usado:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Aqui está um pequeno violino que inventei para demonstrar seu uso.

se o jQuery estiver disponível, você poderá usar o jQuery BBQ