Les applications monopages peuvent afficher un contenu différent sans avoir à charger une 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 façon, nous pouvons mettre à jour l'URL lors de l'affichage d'une autre page (généralement appelée "vue" dans les applications monopages). Cela permet également de s'assurer que le bouton "Retour" du navigateur fonctionne toujours comme prévu.
Dans cet atelier de programmation, vous allez découvrir l'application monopage. Il montre des images de chats ou de chiens et fournit des liens pour basculer entre les deux animaux. Cela semble fonctionner très bien !
À la découverte de l'énigmatique 404
Malheureusement, il y a un petit bug dans l'application. Voyons ça !
- 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" (erreur 404 sournoise). Elle est sournoise, car l'application Web semble fonctionner correctement tant que vous ne cliquez que sur les liens qu'elle contient. Elle ne fonctionne plus lorsque vous utilisez les URL dans une nouvelle fenêtre du 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 dit qu'il n'a
rien trouvé pour l'URL demandée.
Dans ce cas, les moteurs de recherche n'indexent pas les URL, car un utilisateur clique sur un résultat de recherche et trouve le message d'erreur, mais pas le contenu qu'il recherche, comme les photos de chiens.
Corriger le serveur
Ce projet utilise un serveur express.js écrit en JavaScript. Corrigeons le serveur afin qu'il réponde avec le fichier index.html et l'application monopage s'occupe du reste.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
- 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 configuration de route à la ligne 15 ne diffuse l'application Web que lorsque les requêtes sont envoyées à l'URL /. Le serveur doit également diffuser les autres URL que nous avons créées. Modifions ce paramètre pour diffuser toutes les URL afin qu'il puisse également fonctionner avec des URL supplémentaires à l'avenir.
Pour ce faire, nous pouvons remplacer le code à partir de la ligne 15 par ceci:
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.