S(GH)PA: o hack de aplicativo de página única para páginas do GitHub

Há algum tempo, eu queria a capacidade de rotear caminhos para um site do GitHub Pages para seu index.html para manipulação como um aplicativo de página única (SPA). Isso é uma aposta de tabela porque esses aplicativos exigem que todas as solicitações sejam roteadas para um arquivo HTML, a menos que você queira copiar o mesmo arquivo em todas as suas rotas sempre que fizer uma alteração no projeto. Atualmente, o GitHub Pages não oferece uma solução de manipulação de rotas; o sistema Pages pretende ser um mecanismo simples e plano para servir o conteúdo básico do projeto.

Caso você não saiba, o GitHub fornece um detalhe de personalização para o site do seu projeto: a capacidade de adicionar um arquivo 404.html e fazer com que ele sirva como sua página de erro personalizada. Fiz uma primeira tentativa em um hack SPA simplesmente duplicando meu arquivo index.html e renomeando a cópia para 404.html . Acontece que muitas pessoas tiveram o mesmo problema com o GitHub Pages e gostaram da ideia geral. No entanto, o problema que algumas pessoas no Twitter levantaram corretamente foi que a página 404.html ainda é servida com um código de status de 404, o que não é bom para rastreadores de mecanismos de busca. A manopla foi lançada, e eu decidi responder – e responder com vigor!

Mais uma vez, com sentimento

Depois de dormir nisso, pensei comigo mesmo: “Eu, estamos no fundo do território sujo de hack, então por que não faço esse hack ainda mais sujo?!” Para esse fim, desenvolvi um hack ainda melhor que fornece a mesma funcionalidade e simplicidade, ao mesmo tempo em que preserva o suco do rastreador do seu site - e você nem precisa perder tempo duplicando seu arquivo index.html e renomeando-o para 404.html ! A solução a seguir deve funcionar em todos os navegadores modernos de desktop e móveis (Edge, Chrome, Firefox, Safari) e no Internet Explorer 10+.

Modelo e demonstração : Se você quiser pular a explicação e obter as mercadorias, aqui está um repositório de modelos e um URL de teste para vê-lo em ação.

Isso é tão Meta

A primeira coisa que fiz foi investigar outras opções para fazer o navegador redirecionar para a página index.html . Essa parte foi bem direta. Você basicamente tem três opções: uma configuração de servidor, uma manipulação de location JavaScript ou uma meta tag de refresh . O primeiro é obviamente proibido para as páginas do GitHub. E o JavaScript é basicamente o mesmo que uma atualização, mas sem dúvida pior para a indexação do rastreador. Isso nos deixa com a metatag. Uma metatag com um valor de atualização de 0 parece ser tratada como um redirecionamento 301 pelos mecanismos de pesquisa, o que funciona bem para esse caso de uso.

Você precisará começar adicionando um arquivo 404.html a um repositório gh-pages que contém um documento HTML vazio dentro dele. Esse documento deve totalizar mais de 512 bytes (explicado abaixo). Em seguida, coloque a seguinte marcação no elemento head da sua página 404.html :

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

Esse código define a URL de entrada tentada para uma variável no objeto sessionStorage padrão e redireciona imediatamente para a página index.html do seu projeto usando uma metatag de atualização. Se você estiver fazendo um site Github Organization, não coloque um nome de repositório no texto substituto do atributo de conteúdo, apenas faça isso: content=“0;URL='/'”

Personalizando o gerenciamento de rotas

Se você quiser um tratamento de rota mais elaborado, basta incluir alguma lógica JavaScript adicional na tag de script mostrada acima. Você pode ajustar várias coisas: a composição do href que você passa para a página index.html ; quais páginas devem permanecer na página 404 (por meio da remoção dinâmica da metatag); e qualquer outra lógica que você queira colocar em prática para ditar qual conteúdo é mostrado com base na rota de entrada.

512 Bytes Mágicos

Esta é, sem dúvida, uma das peculiaridades mais estranhas que já encontrei no desenvolvimento web. Você deve garantir que o tamanho total de sua página 404.html seja maior que 512 bytes, porque se não for, o Internet Explorer irá desconsiderá-la e mostrará uma página 404 genérica do navegador. Quando finalmente descobri isso, tive que abrir uma cerveja para lidar com a quantidade de tempo que levou.

Vamos Fazer História

Para capturar e restaurar o URL para o qual o usuário navegou inicialmente, você precisará adicionar a seguinte tag de script ao head de sua página index.html antes que qualquer outro JavaScript atue no estado atual da página:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

Esse bit de JavaScript recupera a URL que armazenamos em cache em sessionStorage na página 404.html e substitui a entrada do history atual por ela. Como você escolhe lidar com as coisas daqui é com você, mas eu usaria popstate e hashchange se eu fosse você.

Bom, pessoal, é isso. Agora vá comemorar escrevendo alguns aplicativos de página única no GitHub Pages!

Este artigo faz parte de uma série de desenvolvimento da Web de evangelistas e engenheiros de tecnologia da Microsoft sobre aprendizado prático de JavaScript, projetos de código aberto e práticas recomendadas de interoperabilidade, incluindo o navegador Microsoft Edge.

Incentivamos você a testar em navegadores e dispositivos (incluindo o Microsoft Edge — o navegador padrão para Windows 10) com ferramentas gratuitas em dev.microsoftedge.com, incluindo as ferramentas de desenvolvedor F12: sete ferramentas distintas e totalmente documentadas para ajudá-lo a depurar, testar e acelerar suas páginas da web. Além disso, visite o blog Edge para se manter informado pelos desenvolvedores e especialistas da Microsoft.

Leitura adicional no SmashingMag:

• Um fluxo de trabalho simples do desenvolvimento à implantação
• Criando um aplicativo Web completo no Foundation For Apps
• Crie um blog com páginas Jekyll e GitHub