Os apps de página única podem mostrar conteúdo diferente sem carregar uma nova página. Para isso, eles usam manipuladores de clique 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 como esperado.
Confira o app de página única neste codelab. Ele mostra imagens de gatos ou cachorros e fornece links para alternar entre os dois animais. Parece que está tudo certo.
Como descobrir o erro 404 oculto
Infelizmente, há um bug sutil no app. Vamos dar uma olhada.
- Para visualizar o site, pressione View App. Em seguida, pressione
Fullscreen
. - Clique no link Doggos. Observe como o URL mudou.
- Recarregue o app.
Você recebe uma página com "Cannot GET /doggos", um 404 disfarçado. Ele é "sorrateiro"
porque o app da Web parece funcionar bem, desde que você clique apenas nos links
dele. Ele falha 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 com um URL solicitado, ele responde
com o código de status HTTP 404. Com esse código, o servidor informa que não encontrou
nada para o URL solicitado.
Nesse caso, os mecanismos de pesquisa não indexam os URLs 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 as 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 cuidará do resto.
- Clique em Remix to Edit 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ó veicula 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 exibir todos os URLs, de modo que também funcione com
outros URLs no futuro.
Para isso, mude 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 fornecido.
- Para visualizar o site, pressione View App. Em seguida, pressione
Fullscreen
.
Atualizar e abrir os links em uma nova janela anônima agora deve funcionar como esperado.