Aplicativos de página única podem mostrar conteúdos diferentes 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). Isso também garante que o botão "Voltar" do navegador ainda funcione conforme 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 funciona bem!
Desvendando o erro 404 não autorizado
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 o erro "Cannot GET /doggos" (um erro 404 não autorizado). É "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 da rota na linha 15 só exibe o app da Web quando as solicitações vão para o URL /. O servidor também exibirá os outros URLs que criamos. Vamos alterá-lo para exibir todos os URLs, para que também funcione com URLs adicionais 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 devem funcionar conforme o esperado.