Les applications monopages peuvent afficher différents contenus sans charger de nouvelle page. Pour ce faire, elles utilisent des gestionnaires de clics sur les liens et l'API History. L'API History permet de manipuler l'historique des sessions du navigateur. Nous pouvons ainsi mettre à jour l'URL lorsque nous affichons une autre page (généralement appelée "vue" dans les applications monopages). Il permet également de s'assurer que le bouton "Retour" du navigateur fonctionne toujours comme prévu.
Découvrez l'application monopage dans cet atelier de programmation. Elle affiche des images de chats ou de chiens, et fournit des liens permettant de basculer entre les deux animaux. On dirait que ça fonctionne bien !
Découvrir l'erreur 404 sournoise
Malheureusement, l'application comporte un bug subtil. Voyons de quoi il s'agit.
- Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (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 sournoise. Il est "sournois", car l'application Web semble fonctionner correctement tant que vous ne cliquez que sur les liens qu'elle contient. 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 rien 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 trouverait le message d'erreur, mais pas le contenu qu'il recherchait, comme les photos de chiens.
Corriger le serveur
Ce projet utilise un serveur express.js écrit en JavaScript. Corrigeons le serveur pour qu'il réponde avec index.html. L'application monopage s'occupera 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 d'index.html. La configuration de la 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 cela pour diffuser toutes les URL, afin que cela fonctionne également avec d'autres URL à l'avenir.
Pour ce faire, nous pouvons modifier le code à partir de la ligne 15 comme suit :
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 View App (Afficher l'application), puis sur Fullscreen (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.