Les applications monopages peuvent afficher différents contenus sans charger de nouvelle page. Pour ce faire, ils utilisent des gestionnaires de clics sur les liens et l'API History. L'API History permet de manipuler l'historique des sessions du navigateur. De cette manière, nous pouvons mettre à jour l'URL lorsque nous affichons une autre page (généralement appelée "vue" dans les applications monopages). Il vérifie également que le bouton "Retour" du navigateur fonctionne toujours comme prévu.
Découvrez l'application monopage dans cet atelier de programmation. Il affiche des images de chats ou de chiens, et fournit des liens permettant de basculer entre les deux animaux. Il semble fonctionner correctement.
Démasquer les erreurs 404 sournoises
Malheureusement, l'application comporte un bug subtil. Voyons cela.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Cliquez sur le lien Doggos. Notez que l'URL a changé.
- Actualisez l'application.
Vous obtenez une page contenant "Cannot GET /doggos", une erreur 404 trompeuse. Il s'agit d'une pratique "sournoise", car l'application Web semble fonctionner correctement tant que vous ne cliquez que sur les liens qui s'y trouvent. Il ne fonctionne pas lorsque vous utilisez les URL dans une nouvelle fenêtre de navigateur ou lorsque vous actualisez la page. Le problème est que le serveur ne sait pas comment répondre à une requête pour ces URL. Le code JavaScript de notre application Web utilise l'API History pour naviguer entre elles, 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. Avec ce code, le serveur indique qu'il n'a trouvé
rien 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 trouverait le message d'erreur, mais pas le contenu qu'il recherchait, comme les photos de chiens.
Résoudre les problèmes du serveur
Ce projet utilise un serveur express.js écrit en JavaScript. Corrigez le serveur afin qu'il réponde avec index.html. L'application monopage s'occupera 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 d'index.html. La configuration de la route à la ligne 15 ne sert l'application Web que lorsque les requêtes accèdent à l'URL /. Le serveur doit également diffuser les autres URL que nous avons créées. Modifions cette valeur pour qu'elle diffuse toutes les URL, afin qu'elle fonctionne également avec d'autres URL à l'avenir.
Pour ce faire, nous pouvons remplacer le code à partir 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 n'importe quelle URL donnée.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
L'actualisation et l'ouverture des liens dans une nouvelle fenêtre de navigation privée devraient désormais fonctionner comme prévu.