Comment vérifier si l'utilisateur est en ligne en utilisant javascript ou une bibliothèque?

je pense que vous devriez essayer OFFLINE.js .. il semble assez facile à utiliser, juste lui donner un essai.

il fournit même l'option checkOnLoad qui vérifie la connexion immédiatement sur la page de charge.

en mode Hors connexion.check (): Vérifiez l'état actuel de la connexion.

en mode Hors connexion.etat: L'état actuel de la connexion "haut" ou " bas "

n'ai pas essayé, ce serait bien de savoir si ça fonctionne comme prévu.

EDIT a pris un petit pic dans le code, il utilise la méthode avec demande de XHR échoué suggéré dans ce SO Question

je viens d'obtenir ce morceau de fonctionnalité de code d'un Mozilla Site :

window.addEventListener('load', function(e) {
  if (navigator.onLine) {
    console.log('We\'re online!');
  } else {
    console.log('We\'re offline...');
  }
}, false);

window.addEventListener('online', function(e) {
  console.log('And we\'re back :).');
}, false);

window.addEventListener('offline', function(e) {
  console.log('Connection is down.');
}, false);

Ils ont même un lien pour le voir fonctionner . Je l'ai essayé sous IE, Firefox et Chrome. Chrome est apparu le plus lent, mais il n'était que d'environ une demi-seconde.

regardez détecter que la connexion Internet est hors ligne? essentiellement, faire une demande ajax à quelque chose que vous savez est susceptible d'être vers le haut (dire google.com) et si elle échoue, il n'y a pas de connexion internet.

navigateur.en ligne est une propriété qui maintient une valeur true/false (vrai en ligne, faux en mode hors connexion). Cette propriété est mise à jour chaque fois que l'utilisateur passe en Mode "Offline".

window.addEventListener('load', function() {

  function updateOnlineStatus(event) {
     document.body.setAttribute("data-online", navigator.onLine);
  }
  updateOnlineStatus();
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

vous pouvez utiliser le nouveau Fetch API qui déclenchera une erreur presque immédiatement si aucun réseau n'est présent.

le problème avec cela est que L'API Fetch a support pour bébé en ce moment (actuellement Chrome a l'implémentation la plus stable, Firefox et Opera est là, C'est à dire ne le supporte pas). Il existe un polyfill pour soutenir le principe fetch mais pas nécessairement le retour rapide comme avec une pure mise en œuvre. D'un autre côté, une application hors ligne nécessiterait un navigateur moderne...

un exemple qui essaiera de charger un fichier texte simple sur HTTPS pour éviter les exigences de la CORS (lien choisi au hasard, vous devriez configurer un serveur avec un petit fichier texte pour tester contre-test dans Chrome, pour l'instant):

fetch("https://link.to/some/testfile")
    .then(function(response) {
        if (response.status !== 200) {  // add more checks here, ie. 30x etc.
            alert("Not available");     // could be server errors
        }
        else
            alert("OK");
    })
    .catch(function(err) {
        alert("No network");           // likely network errors (incl. no connection)
    });

une autre option est de définir un travailleur et l'utilisation d'extraction à partir de là. De cette façon, vous pouvez servir une page optionnelle/personnalisée hors ligne ou une page Mise en cache lorsque la page demandée n'est pas disponible. C'est aussi une API très fraîche.

Essayez d'utiliser les WebRTC , voir diafygi/webrtc-ips ; dans la partie

de plus, ces requêtes STUN sont faites en dehors de la normale Procédure XMLHttpRequest, de sorte qu'ils ne sont pas visibles dans le développeur console ou pouvant être bloquée par des plugins tels que AdBlockPlus ou Ghostery. Cela rend ces types de demandes disponibles en ligne suivi si un annonceur met en place un serveur assommant avec un joker domaine.

modifié minimalement pour enregistrer "en ligne" ou" hors ligne " à console

// https://github.com/diafygi/webrtc-ips
function online(callback){

    //compatibility for firefox and chrome
    var RTCPeerConnection = window.RTCPeerConnection
        || window.mozRTCPeerConnection
        || window.webkitRTCPeerConnection;
    var useWebKit = !!window.webkitRTCPeerConnection;

    //bypass naive webrtc blocking using an iframe
    if(!RTCPeerConnection) {
        //NOTE: you need to have an iframe in the page
        // right above the script tag
        //
        //<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
        //<script>...getIPs called in here...
        //
        var win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection
            || win.mozRTCPeerConnection
            || win.webkitRTCPeerConnection;
        useWebKit = !!win.webkitRTCPeerConnection;
    }

    //minimal requirements for data connection
    var mediaConstraints = {
        optional: [{RtpDataChannels: true}]
    };

    //firefox already has a default stun server in about:config
    //    media.peerconnection.default_iceservers =
    //    [{"url": "stun:stun.services.mozilla.com"}]
    var servers = undefined;

    //add same stun server for chrome
    if(useWebKit)
        servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

    //construct a new RTCPeerConnection
    var pc = new RTCPeerConnection(servers, mediaConstraints);

    //create a bogus data channel
    pc.createDataChannel("");

    var fn = function() {};

    //create an offer sdp
    pc.createOffer(function(result){

        //trigger the stun server request
        pc.setLocalDescription(result, fn, fn);

    }, fn);

    //wait for a while to let everything done
    setTimeout(function(){
        //read candidate info from local description
        var lines = pc.localDescription.sdp.split("\n");
        // return `true`:"online" , or `false`:"offline"
        var res = lines.some(function(line) {
          return line.indexOf("a=candidate") === 0
        });
        callback(res);
    }, 500);
}

//Test: Print "online" or "offline" into the console
online(function(connection) {
  if (connection) {
    console.log("online")
  } else {
    console.log("offline")
  }
});

Ma solution c'est de prendre un très petite image (1x1), pas de mise en cache et toujours en ligne .

<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>

Notes:

• utilisez une copie locale de jQuery sinon cela ne marchera pas hors ligne .

• j'ai testé le code onLine/offLine et il fonctionne sans délai .

• fonctionne avec tous les navigateurs, bureau ou Mobile.

• dans le cas où vous vous demandez, il n'y a pas de suivi effectué à partir de Google Analytics que nous n'utilisons pas d'arguments.

• n'hésitez pas à changer l'image, assurez-vous qu'elle ne soit pas mise en cache et qu'elle est petite en taille.

vous pouvez utiliser SignalR, si vous développez en utilisant les technologies MS web. SignalR établira soit des sondages longs ou des sockets web selon votre technologie de navigateur de serveur/client, transparent pour vous le développeur. Vous n'avez pas besoin de l'utiliser pour autre chose que de déterminer si vous avez une connexion active sur le site ou pas.

si SignalR se déconnecte pour n'importe quelle raison, alors vous avez perdu la connexion au site, aussi longtemps que votre instance de serveur SignalR est effectivement installé sur le site. Ainsi, vous pouvez utiliser $.connexion.hub.déconnecté() événement/méthode sur le client pour définir une var qui détient l'état de votre connexion.

Lire SignalR et comment l'utiliser pour déterminer les états de connexion ici... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect

voir Comment puis-je vérifier le type de connexion (WiFi/LAN/WWAN) en utilisant HTML5/JavaScript? réponses:

• Rob W suggère navigateur.connexion ;
• Bergi suggère Windows.Networking.Connectivity API à ce tutoriel ;
• Gerard Sexton suggère Gmail approach .

// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}