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 os erros 404 ocultos
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 com 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 vão indexar 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 as fotos de cães.
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 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ó 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 fazer isso, podemos mudar o código a partir da linha 15 para este:
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 funcionam como esperado.