Les applications monopages peuvent afficher un contenu différent sans charger de nouvelle page. À faire Ils utilisent donc des gestionnaires de clics sur les liens et l'API History. L'onglet Historique de l'API Monitoring permet de manipuler l'historique des sessions du navigateur. De cette façon, nous pouvons mettre à jour l'URL lorsque affichant une autre page (généralement appelée "vue" dans les applications monopages). Il y a aussi s'assure que le bouton Retour du navigateur fonctionne toujours comme prévu.
Intéressons-nous à l'application monopage dans cet atelier de programmation. Elle montre un chat ou un chien. et fournit des liens pour passer d'un animal à l'autre. Cela semble fonctionner Très bien !
Découverte de l'erreur 404 sournoise
Malheureusement, l'application comporte un petit bug. Voyons ça de plus près.
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur
Plein écran
- Cliquez sur le lien Doggos. Notez comment l'URL a changé.
- Actualisez l'application.
Vous obtenez une page contenant "Cannot GET /doggos" une erreur 404 sournoise. Elle est "sournoise",
car l'application Web semble fonctionner
bien tant que vous ne cliquez que sur les liens dans
Elle ne fonctionne plus lors de l'utilisation des URL dans une nouvelle fenêtre du navigateur ou lors de l'actualisation de la
. Le problème est que le serveur ne sait pas
comment répondre à une demande de
ces URL. Le code JavaScript de notre application Web utilise l'API History pour
naviguer entre eux, mais le serveur ne sait pas quoi en faire.
Chaque fois que le serveur ne sait pas quoi faire pour une URL demandée, il répond
avec le code d'état HTTP 404. Ce code indique au serveur qu'il n'a pas trouvé
pour l'URL demandée.
Dans ce cas, les moteurs de recherche n'indexeront pas les URL, car un utilisateur cliquerait sur un résultat de recherche et trouvent le message d'erreur, mais pas le contenu que vous recherchez, comme les photos de chiens.
Réparer le serveur
Ce projet utilise un serveur express.js écrit en JavaScript. Résolvons le serveur de sorte qu'il réponde avec index.html et l'appel de fichier de Google s'occupe du reste.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
- Sélectionnez le fichier
server.js.
Ce fichier contient le code du serveur. Il configure un serveur express.js et envoie
le contenu du fichier index.html. La route configurée à la ligne 15 ne diffuse que l'application Web
lorsque les requêtes sont dirigées vers l'URL /. Le serveur doit également afficher les autres URL
que vous avez créés. Modifions-le pour diffuser toutes les URL, de sorte qu'il fonctionne aussi avec
d'autres URL à l'avenir.
Pour ce faire, nous pouvons remplacer le code de la ligne 15 par le code suivant:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* correspond à n'importe quelle URL, et le serveur répond désormais avec l'application Web dans
index.html pour une URL donnée.
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur
Plein écran
L'actualisation et l'ouverture des liens dans une nouvelle fenêtre de navigation privée devraient désormais fonctionner comme comme prévu.