Détecter la connexion Internet est en mode hors connexion?

Vous pouvez déterminer que la connexion est perdue en faisant échoué demandes XHR.

L'approche standard est de réessayer la demande à quelques reprises. Si cela ne fonctionne pas, alerte l'utilisateur pour vérifier la connexion, et échouer gracieusement.

Note: De mettre l'ensemble de l'application dans un "hors ligne" de l'état peut conduire à beaucoup de risque d'erreur de travaux de manutention de l'état.. les connexions sans fil peuvent aller et venir, etc. Alors votre meilleur pari peut être simplement de ne pas gracieusement, de préserver les données, et d'alerter l'utilisateur.. leur permettant éventuellement de résoudre le problème de connexion s'il en est, et pour continuer à utiliser votre application avec une bonne quantité de pardon.

Note:, Vous pouvez consulter un site fiable comme google pour la connectivité, mais cela peut ne pas être entièrement utile que juste essayer de faire votre propre demande, parce que, tandis que Google peuvent être disponibles, votre demande ne peut pas être, et vous allez encore avoir à gérer votre propre problème de connexion. Essaie d'envoyer un ping vers google serait un bon moyen pour vérifier que la connexion internet lui-même est en baisse, de sorte que si l'information est utile pour vous, alors il pourrait être en vaut la peine.

Note: l'Envoi d'un Ping pourrait être réalisé de la même manière que vous le feriez n'importe quel type de requête ajax, mais l'envoi d'une commande ping sur google, dans ce cas, serait poser certaines difficultés. Tout d'abord, nous aimerions avoir le même inter-domaine des questions qui sont généralement rencontrés dans la prise Ajax communications. Une option est de mettre en place un serveur proxy côté, où nous avons fait ping google (ou autre site), et de retourner les résultats de la commande ping à l'application. C'est un catch-22 parce que si la connexion internet est en fait le problème, nous ne serons pas en mesure d'obtenir sur le serveur, et si le problème de connexion est seulement sur notre propre nom de domaine, nous ne serons pas en mesure de faire la différence. D'autres croix-domaine des techniques pourrait être tenté, par exemple, l'incorporation d'une iframe dans la page qui pointe vers google.com et puis d'interrogation de l'iframe pour la réussite/échec (examiner le contenu, etc). L'incorporation d'une image ne peut pas vraiment dire quoi que ce soit nous, parce que nous avons besoin d'une réponse utile à partir du mécanisme de communication afin d'en tirer une bonne conclusion à propos de ce qu'il se passe. Encore une fois, la détermination de l'état de la connexion internet dans son ensemble peut être plus d'ennuis que cela vaut la peine. Vous devrez poids de ces options pour votre application spécifique.

Il y a un certain nombre de façons de le faire:

• Requête AJAX vers votre propre site web. Si la requête échoue, il ya une bonne chance que c'est la connexion à la faute. Le JQuery de la documentation a une section sur la manipulation a échoué requêtes AJAX. Méfiez-vous de la Même La Politique De L'Origine lors de cette opération, ce qui peut vous empêcher d'accéder à des sites à l'extérieur de 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é ou renommé, et serait généralement inférieur choix pour l'ajax option.

Il y a donc plusieurs façons d'essayer et de détecter cela, aucun idéal, mais en l'absence de la capacité de sauter hors du bac à sable navigateur et l'accès de l'utilisateur net état de la connexion directement, ils semblent être les meilleures options.

Presque tous les principaux navigateurs prennent désormais en charge la window.navigator.en ligne de la propriété, et le correspondant de online et offline événements de fenêtre:

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

Essayez de régler votre système ou navigateur en mode hors connexion/mode en ligne et de vérifier la console ou le window.navigator.onLine propriété pour les changements de valeur. Vous pouvez le tester sur ce site internet ainsi.

Toutefois, de noter cette citation de Mozilla Documentation:

Dans Chrome et Safari, si le navigateur n'est pas capable de se connecter à un réseau local (LAN) ou un routeur, il est en mode hors connexion; toutes les autres conditions de retour true. Ainsi, alors que vous pouvez supposer que le navigateur est en mode hors connexion lorsqu'il renvoie à un false valeur, vous ne pouvez pas supposer qu'un true valeur signifie nécessairement que le navigateur peut accéder à l'internet. Vous pourriez obtenir des faux positifs, comme dans les cas où l'ordinateur est en cours d'exécution d'un logiciel de virtualisation qui a les cartes ethernet virtuelles qui sont toujours "connecté". Par conséquent, si vous voulez vraiment déterminer la ligne d'état du navigateur, vous devez développer de nouveaux moyens de vérification.

Dans Firefox et Internet Explorer de changer de navigateur en mode hors connexion envoie un false valeur. Jusqu'à ce que Firefox 41, toutes les autres conditions de retour d'un true valeur; depuis Firefox 41, sur OS X et Windows, la valeur va suivre celui de la connectivité du réseau.

(l'emphase est de mon propre)

Cela signifie que si window.navigator.onLine est false (ou si vous obtenez un offline événement), vous avez une garantie de ne pas avoir de connexion Internet.

Si c'est true cependant (ou si vous obtenez un online cas), cela signifie seulement que le système est connecté à un réseau, au mieux. Cela ne signifie pas que vous avez accès à Internet par exemple. Pour vérifier cela, vous devez utiliser l'une des solutions décrites dans les autres réponses.

_{au départ, j'ai prévu de poster ce qu'une mise à jour de Subvention de Wagner répondre, mais il semblait trop d'un montage, d'autant plus que le 2014 mise à jour était déjà pas de lui.}

Comme olliej dit, à l'aide de la navigator.onLine navigateur propriété est préférable que l'envoi des demandes de réseau et, en conséquence, avec developer.mozilla.org/En/Online_and_offline_events, il est même soutenu par d'anciennes versions de Firefox et IE.

Récemment, le WHATWG a précisé l'ajout de la online et offline événements, dans le cas où vous avez besoin de réagir sur navigator.onLine changements.

Veuillez payer aussi l'attention sur le lien posté par Daniel Silveira, qui souligne que le fait de compter sur ceux signal/propriété pour la synchronisation avec le serveur n'est pas toujours une bonne idée.

J'ai dû faire une application web (ajax) pour un client qui travaille beaucoup avec les écoles, ces écoles ont souvent une mauvaise connexion internet-je utiliser cette fonction simple pour détecter si il y a une connexion, fonctionne très bien!

J'utilise CodeIgniter et Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

Je pense que c'est une manière très simple.

var x = confirm("Are you sure you want to submit?");
if (x) {
  if (navigator.onLine == true) {
    return true;
  }
  alert('Internet connection is lost');
  return false;
}
return false;

window.navigator.onLine

est ce que vous recherchez, mais peu de choses à ajouter, tout d'abord, si c'est quelque chose sur votre application dont vous souhaitez garder le contrôle (comme pour voir si l'utilisateur de passer en mode hors connexion, ce qui correct dans ce cas la plupart du temps, alors vous avez besoin d'écouter pour changer aussi), pour que vous ajouter un écouteur d'événement à la fenêtre pour détecter tout changement, pour vérifier si l'utilisateur est hors ligne, vous pouvez le faire:

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

et de vérifier en ligne:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

Il y a 2 réponses forthis pour deux senarios:-

1. Si vous êtes à l'aide de JavaScript sur un site web(je.e; ou toute partie front-end)
   La façon la plus simple de le faire est:

   <h2>The Navigator Object</h2>
   
   <p>The onLine property returns true if the browser is online:</p>
   
   <p id="demo"></p>
   
   <script>
     document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
   </script>

2. Mais si vous êtes en utilisant js côté serveur(j'.e; nœud, etc.), Vous pouvez déterminer que la connexion est perdue en faisant échec de demandes XHR.

   L'approche standard est de réessayer la demande un peu de temps. Si cela ne fonctionne pas, alerte à l'utilisateur de vérifier la connexion, et ne parviennent pas gracieusement.

Le problème de certaines méthodes comme navigator.onLine, c'est qu'ils ne sont pas compatibles avec certains navigateurs et les versions mobiles, une option qui m'a beaucoup aidé à utiliser le classique XMLHttpRequest méthode et aussi prévoir la possibilité que le fichier a été stockée dans la mémoire cache à la réponse XMLHttpRequest.status est supérieur à 200 et inférieur à 304.

Voici mon code:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}