Os apps de página única podem mostrar conteúdo diferente sem carregar uma nova página. Para fazer isso, eles usam manipuladores de cliques em links e a API History. A API History permite manipular o histórico de sessões do navegador. Dessa forma, podemos atualizar o URL ao mostrar uma página diferente (geralmente chamada de "visualização" em apps de página única). Ele também garante que o botão "Voltar" do navegador ainda funcione conforme o esperado.
Confira o app de página única neste codelab. Ele mostra imagens de gatos ou cães e fornece links para alternar entre os dois animais. Parece que está funcionando bem.
Descobrindo o erro 404 oculto
Infelizmente, há um bug sutil no app. Vamos conferir!
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Clique no link Doggos. Observe como o URL mudou.
- Atualize o app.
Você recebe uma página com "Cannot GET /doggos
", um 404 oculto. É "secreto",
porque o app da Web parece funcionar bem, desde que você clique apenas nos links
dentro dele. Ele é interrompido ao usar os URLs em uma nova janela do navegador ou ao atualizar a
página. O problema é que o servidor não sabe como responder a uma solicitação para
esses URLs. O código JavaScript no nosso app da Web está usando a API History para
navegar entre eles, mas o servidor não sabe o que fazer com eles.
Sempre que o servidor não sabe o que fazer para um URL solicitado, ele responde com o código de status HTTP 404
. Com esse código, o servidor diz que não encontrou
nada para o URL solicitado.
Os mecanismos de pesquisa não indexarão os URLs nesse caso, porque um usuário clicaria em um resultado da pesquisa e encontraria a mensagem de erro, mas não o conteúdo que estava procurando, como fotos de cachorros.
Como corrigir o servidor
Este projeto usa um servidor express.js escrito em JavaScript. Vamos corrigir o servidor para que ele responda com index.html, e o app de página única vai cuidar do resto.
- Clique em Remixar para editar para tornar o projeto editável.
- Selecione o arquivo
server.js
.
Esse arquivo contém o código do servidor. Ele configura um servidor express.js e envia
o conteúdo de index.html. A configuração de rota na linha 15 só serve o app da Web
quando as solicitações vão para o URL /
. O servidor também precisa exibir os outros URLs que
criamos. Vamos mudar isso para veicular todos os URLs, para que também funcione com
outros URLs no futuro.
Para isso, podemos alterar o código a partir da linha 15 para o seguinte:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
O /*
corresponde a qualquer URL, e o servidor agora responde com o app da Web em
index.html
para qualquer URL.
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
A atualização e a abertura dos links em uma nova janela anônima agora devem funcionar conforme o esperado.