Os apps de página única podem mostrar conteúdos diferentes sem carregar uma nova página. Afazeres portanto, eles usam manipuladores de cliques em links e a API History. História API permite manipular o histórico de sessões do navegador. Dessa forma, podemos atualizar o URL quando mostrar uma página diferente (geralmente chamada de "visualização" em aplicativos de página única). Ela também garante que o botão "Voltar" do navegador ainda funcione conforme esperado.
Confira o app de página única neste codelab. Mostra um gato ou um cachorro imagens e fornece links para alternar entre os dois animais. Parece que funciona tudo bem!
Desvendando o erro 404 não autorizado
Infelizmente, há um bug sutil no app. Vamos dar uma olhada!
- 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 furtivo. É "sorrateira",
porque o app da Web parece funcionar bem, contanto que você clique apenas nos links
reimplantá-lo. Ele falha ao usar os URLs em uma nova janela do navegador ou ao atualizar o
página. O problema é que o servidor não sabe como responder a uma solicitação de
esses URLs. O código JavaScript em nosso aplicativo 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
pelo 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 encontraram a mensagem de erro, mas não o conteúdo procurando, como fotos de cães.
Como corrigir o servidor
Esse projeto usa um servidor express.js escrito em JavaScript. Vamos corrigir o servidor para que ele responda com index.html e a única o Google Page 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 atende apenas ao aplicativo da Web
quando as solicitações vão para o URL /. O servidor também deve veicular os outros URLs
tenham criado. Vamos alterá-lo para exibir todos os URLs, para que também funcione com
URLs adicionais 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 Ver app. Em seguida, pressione
Tela cheia
Atualizar e abrir os links em uma nova janela anônima agora deve funcionar como o esperado.