Os apps de página única podem mostrar conteúdo diferente sem carregar uma nova página. Para isso, eles usam gerenciadores de cliques nos links e na API History. A API History permite manipular o histórico da sessão 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.
Dê uma olhada no app de página única neste codelab. Ele mostra imagens de gato ou cachorro e fornece links para alternar entre os dois animais. Parece que está funcionando bem!
Como descobrir o código 404 não autorizado
Há um bug sutil no app. Vamos analisar.
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
. - Clique no link Doggos. Observe como o URL mudou.
- Atualize o app.
Você recebe uma página com "Cannot GET /doggos": um erro 404 não autorizado. É "não autorizado",
porque o aplicativo da Web parece funcionar bem, desde que você clique apenas em links dentro
dele. Ele não funciona ao usar os URLs em uma nova janela do navegador ou ao atualizar a página. O problema é que o servidor não sabe responder a uma solicitação por esses URLs. O código JavaScript no nosso app da Web usa a API History para navegar entre eles, mas o servidor não sabe o que fazer com eles.
Sempre que o servidor não souber o que fazer com um URL solicitado, ele responderá 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 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 cuida 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 da rota na linha 15 só disponibiliza o app da Web
quando as solicitações vão para o URL /. O servidor também deve exibir os outros URLs que criamos. Vamos alterá-lo para exibir todos os URLs, para que também funcione com
outros URLs no futuro.
Para isso, altere 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 Ver app. Em seguida, pressione
Tela cheia
.
A atualização e a abertura dos links em uma nova janela anônima agora devem funcionar conforme o esperado.