Hors connexion — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 12)

Hors connexion

Projet : la Librairie interactive · niveau 2

Énoncé

Quand le navigateur perd le réseau, afficher en haut de page « Vous êtes hors connexion : le catalogue affiché peut ne plus être à jour, et la commande attendra le retour du réseau. », et désactiver le bouton d'envoi de la commande ; tout rétablir au retour du réseau. Utiliser navigator.onLine et les événements online et offline. Cette information est-elle fiable ?

Corrigé


const bandeau = document.querySelector("#bandeau");
const commander = document.querySelector("#commander");

function mettreAJour() {
  bandeau.hidden = navigator.onLine;
  commander.disabled = !navigator.onLine;
}

window.addEventListener("online", mettreAJour);
window.addEventListener("offline", mettreAJour);
mettreAJour();

Le bandeau porte role="status" pour être annoncé. Vérifié en coupant puis rétablissant le réseau du navigateur (exercices/ex6-hors-ligne/). L'information n'est fiable que dans un sens : navigator.onLine faux signifie bien qu'il n'y a aucun réseau, mais vrai signifie seulement qu'une connexion existe (au réseau local, à un point d'accès Wi-Fi qui demande une identification…), pas que le serveur répond. Le traitement des échecs de fetch reste indispensable.