Détecter que la connexion Internet est hors ligne ?

Question

Comment détecter que la connexion Internet est hors ligne en JavaScript ?

Answer 1

Vous pouvez déterminer que la connexion est perdue en faisant Requêtes XHR échouées .

L'approche standard consiste à relance de la demande plusieurs fois. Si ça ne passe pas, alerter l'utilisateur pour vérifier la connexion, et échouer avec élégance .

Sidenote : Mettre l'ensemble de l'application dans un état "hors ligne" peut conduire à beaucoup d'erreurs dans la gestion de l'état les connexions sans fil peuvent aller et venir, etc. Le mieux est donc de se contenter d'un échec élégant, de préserver les données et d'alerter l'utilisateur, ce qui lui permettra de résoudre le problème de connexion, le cas échéant, et de continuer à utiliser l'application avec une certaine indulgence.

Sidenote : Vous pourriez vérifier la connectivité d'un site fiable comme google, mais ce n'est peut-être pas aussi utile que d'essayer de faire votre propre demande, car si Google peut être disponible, votre propre application peut ne pas l'être, et vous devrez toujours gérer votre propre problème de connexion. Essayer d'envoyer un ping à Google serait un bon moyen de confirmer que la connexion Internet elle-même est en panne, donc si cette information vous est utile, alors cela peut valoir la peine.

Sidenote : Envoi d'un ping pourrait être réalisé de la même manière que n'importe quelle requête ajax bidirectionnelle, mais l'envoi d'un ping à Google, dans ce cas, poserait quelques problèmes. Tout d'abord, nous aurions les mêmes problèmes d'inter-domaines qui sont généralement rencontrés dans les communications Ajax. L'une des options consiste à mettre en place un proxy côté serveur, dans lequel nous ping google (ou tout autre site), et renvoie les résultats du ping à l'application. Ceci est un Casse-tête car si la connexion Internet est réellement le problème, nous ne pourrons pas accéder au serveur, et si le problème de connexion ne concerne que notre propre domaine, nous ne pourrons pas faire la différence. D'autres techniques inter-domaines peuvent être essayées, par exemple, l'intégration d'une iframe dans votre page qui pointe vers google.com, puis l'interrogation de l'iframe en cas de succès/échec (examen du contenu, etc.). L'intégration d'une image peut ne rien nous apprendre, car nous avons besoin d'une réponse utile du mécanisme de communication pour tirer une bonne conclusion sur ce qui se passe. Une fois encore, déterminer l'état de la connexion Internet dans son ensemble peut s'avérer plus compliqué que nécessaire. Vous devrez évaluer ces options pour votre application spécifique.

Answer 2

IE 8 prendra en charge le window.navigator.onLine propriété.

Mais bien sûr, cela n'aide pas les autres navigateurs ou systèmes d'exploitation. Je prédis que d'autres fournisseurs de navigateurs décideront de fournir cette propriété également, étant donné l'importance de connaître le statut en ligne/hors ligne dans les applications Ajax.

Jusqu'à ce que cela se produise, soit XHR ou un Image() o <img> peut fournir une fonctionnalité proche de celle que vous souhaitez.

Mise à jour (2014/11/16)

Les principaux navigateurs prennent désormais en charge cette propriété, mais vos résultats varieront.

Citation de Documentation Mozilla :

Dans Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne ; toutes les autres conditions reviennent. true . Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie un message de type false vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à l'internet. Vous pourriez obtenir des faux positifs, comme dans les cas où l'ordinateur exécute un logiciel de virtualisation dont les adaptateurs Ethernet virtuels sont toujours "connectés". Par conséquent, si vous voulez vraiment déterminer l'état en ligne du navigateur, vous devez développer des moyens de vérification supplémentaires.

Dans Firefox et Internet Explorer, le fait de passer le navigateur en mode hors connexion envoie une false valeur. Toutes les autres conditions renvoient une true valeur.

Answer 3

 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

Answer 4

Il existe plusieurs façons de procéder :

• Une requête AJAX vers votre propre site web. Si cette requête échoue, il y a de fortes chances que ce soit la connexion qui soit en cause. Le site JQuery a une section sur gestion des échecs des requêtes AJAX . Méfiez-vous de la Politique de l'origine identique lors de cette opération, ce qui peut vous empêcher d'accéder à des sites extérieurs à votre domaine.
• Vous pourriez mettre un onerror dans un img comme <img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" /> .

Cette méthode peut également échouer si l'image source est déplacée ou renommée, et constitue généralement un choix inférieur à l'option ajax.

Il y a donc plusieurs façons différentes d'essayer de détecter cela, aucune n'est parfaite, mais en l'absence de la possibilité de sortir du bac à sable du navigateur et d'accéder directement à l'état de la connexion Internet de l'utilisateur, elles semblent être les meilleures options.

Answer 5

L'API HTML5 Application Cache spécifie navigator.onLine, qui est actuellement disponible dans les versions bêta d'IE8, les versions nocturnes de WebKit (par exemple Safari) et est déjà pris en charge par Firefox 3.