Comment JavaScript peut-il détecter et répondre aux changements de connectivité Internet ?

Détection de la connectivité Internet en JavaScript : un guide complet

Dans le paysage actuel du développement Web, garantir une expérience utilisateur robuste et fiable dépend souvent de la détection si la connexion Internet est hors ligne ou active. Heureusement, JavaScript propose plusieurs méthodes pour réaliser cette fonctionnalité critique.

Présentation de la propriété window.navigator.onLine

La plupart des principaux navigateurs prennent désormais en charge la propriété window.navigator.onLine , une valeur booléenne qui indique l'état actuel de la connexion Internet. Accédez à cette propriété pour vérifier si l'utilisateur est connecté à Internet.

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

Écoute des événements de connectivité

Les navigateurs fournissent également des écouteurs d'événements pour les événements en ligne et hors ligne. , qui se déclenchent lorsque l'état de la connectivité change. En écoutant ces événements, vous pouvez réagir aux changements en temps réel.

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

Vérifier l'état de la connectivité en un clic

Pour démontrer ces méthodes en action , créez un bouton HTML qui, lorsque vous cliquez dessus, vérifie et affiche la fenêtre actuelle.navigator.onLine value :

<button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

Considérations supplémentaires

• En raison de la mise en cache et des websockets, la propriété window.navigator.onLine peut ne pas toujours refléter avec précision la état réel de la connectivité.
• Utiliser des API côté serveur (par exemple, l'API fetch()) et surveiller régulièrement leur les réponses peuvent compléter les méthodes côté client pour une fiabilité accrue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!