Comment détecter l'événement en ligne / hors ligne cross-browser?

StackOverflow https://stackoverflow.com/questions/3181080

Question

Je suis en train de détecter avec précision lorsque le navigateur est hors ligne, en utilisant les événements HTML5 en ligne et hors ligne.

Voici mon code: 

<script>
    // FIREFOX
    $(window).bind("online", applicationBackOnline); 
    $(window).bind("offline", applicationOffline);

    //IE
    window.onload = function() {
        document.body.ononline = IeConnectionEvent;
        document.body.onoffline = IeConnectionEvent;
    } 
</script>

Il fonctionne très bien quand je viens de frapper « hors ligne de travail » de chaque Firefox ou IE, mais il est le genre de travail au hasard quand je fait débrancher le fil.

Quelle est la meilleure façon de détecter ce changement? Je voudrais éviter de répéter les appels ajax avec les délais d'attente.

Était-ce utile?

La solution

Les fournisseurs de navigateur ne peut pas se mettre d'accord sur la façon de définir hors-ligne. Certains navigateurs ont une fonctionnalité Travailler hors connexion, qu'ils considèrent séparés à un manque d'accès au réseau, ce qui est encore différent de l'accès Internet. Le tout est un gâchis. Certains fournisseurs de navigateur à jour le drapeau navigator.onLine lorsque l'accès au réseau réel est perdu, d'autres ne le font pas.

De la spécification:

  

renvoie false si l'agent utilisateur est   définitivement déconnecté (déconnecté   le réseau). Renvoie true si l'utilisateur   agent peut être en ligne.

     

Les événements en ligne et hors ligne sont   tiré lorsque la valeur de cet attribut   les changements.

     

L'attribut doit navigator.onLine   faux retour si l'agent utilisateur   pas en contact avec le réseau lorsque l'utilisateur   suit des liens ou lorsqu'un script   demande une page distante (ou sait que   une telle tentative échouerait) et doit   return true autrement.

Enfin, les notes spécifications:

  

Cet attribut est intrinsèquement   non fiable. Un ordinateur peut être   connecté à un réseau sans avoir   un accès Internet.

Autres conseils

Les éditeurs de navigateurs majeurs diffèrent sur ce que signifie « hors ligne ».

Chrome et Safari détecte quand vous allez « hors ligne » automatiquement -. Ce qui signifie que les événements et les propriétés « en ligne » se déclenche automatiquement lorsque vous débranchez votre câble réseau

Firefox (Mozilla), Opera et IE prendre dans le navigateur une approche différente, et vous considérez « en ligne » à moins que vous choisissez explicitement « mode hors connexion. » - même si vous ne disposez pas d'une connexion réseau de travail

Il existe des arguments valables pour le comportement Firefox / Mozilla, qui sont décrites dans les commentaires de ce rapport de bogue:

https://bugzilla.mozilla.org/show_bug.cgi?id=654579

Mais, pour répondre à la question -. Vous ne pouvez pas compter sur les événements en ligne / hors ligne / propriété pour détecter s'il y a effectivement la connectivité réseau

, vous devez plutôt utiliser des approches alternatives.

La section de cet article Mozilla Developer "Notes" fournit des liens vers deux autres méthodes:

https://developer.mozilla.org/en/Online_and_offline_events

« Si l'API est pas implémentée dans le navigateur, vous pouvez utiliser d'autres signaux pour détecter si vous êtes hors ligne dont l'écoute des événements d'erreur AppCache et les réponses de XMLHttpRequest »

Ce lien renvoie à un exemple de l'approche « à l'écoute des événements d'erreur AppCache »:

http://www.html5rocks.com/en/mobile/workingoffthegrid / # toc-AppCache

... et un exemple de l'approche "À l'écoute des échecs XMLHttpRequest":

http://www.html5rocks.com/en / mobile / workingoffthegrid / # toc-xml-http-demande

HTH, - Tchad

Aujourd'hui, il y a une bibliothèque JavaScript open source qui fait ce travail. Il est appelé Offline.js

  

afficher automatiquement l'indication en ligne / hors ligne à vos utilisateurs.

https://github.com/HubSpot/offline

Assurez-vous de vérifier la pleine README . Il contient les événements que vous pouvez brancher dans.

Voici une page de test . Il est beau / a une interface de retour de Nice par la route! :)

  

Offline.js Simulate UI est un plug-in Offline.js   qui vous permet de tester la façon dont vos pages répondent à différents   les états de connectivité sans avoir à utiliser des méthodes de force brute à   désactiver votre connectivité réelle.

La meilleure façon qui fonctionne désormais sur tous les principaux navigateurs est le script suivant: 

(function () {
    var displayOnlineStatus = document.getElementById("online-status"),
        isOnline = function () {
            displayOnlineStatus.innerHTML = "Online";
            displayOnlineStatus.className = "online";
        },
        isOffline = function () {
            displayOnlineStatus.innerHTML = "Offline";
            displayOnlineStatus.className = "offline";
        };

    if (window.addEventListener) {
        /*
            Works well in Firefox and Opera with the 
            Work Offline option in the File menu.
            Pulling the ethernet cable doesn't seem to trigger it.
            Later Google Chrome and Safari seem to trigger it well
        */
        window.addEventListener("online", isOnline, false);
        window.addEventListener("offline", isOffline, false);
    }
    else {
        /*
            Works in IE with the Work Offline option in the 
            File menu and pulling the ethernet cable
        */
        document.body.ononline = isOnline;
        document.body.onoffline = isOffline;
    }
})();

Source: http://robertnyman.com/html5/offline/online-offline-events.html

Le window.navigator.onLine attribut et ses événements associés sont actuellement peu fiables sur certains web les navigateurs ( notamment bureau Firefox ) comme l'a dit @Junto, j'ai donc écrit une petite fonction (en utilisant jQuery) qui vérifient périodiquement la état de la connectivité réseau et augmenter le offline et online: 

// Global variable somewhere in your app to replicate the 
// window.navigator.onLine variable (it is not modifiable). It prevents
// the offline and online events to be triggered if the network
// connectivity is not changed
var IS_ONLINE = true;

function checkNetwork() {
  $.ajax({
    // Empty file in the root of your public vhost
    url: '/networkcheck.txt',
    // We don't need to fetch the content (I think this can lower
    // the server's resources needed to send the HTTP response a bit)
    type: 'HEAD',
    cache: false, // Needed for HEAD HTTP requests
    timeout: 2000, // 2 seconds
    success: function() {
      if (!IS_ONLINE) { // If we were offline
        IS_ONLINE = true; // We are now online
        $(window).trigger('online'); // Raise the online event
      }
    },
    error: function(jqXHR) {
      if (jqXHR.status == 0 && IS_ONLINE) {
        // We were online and there is no more network connection
        IS_ONLINE = false; // We are now offline
        $(window).trigger('offline'); // Raise the offline event
      } else if (jqXHR.status != 0 && !IS_ONLINE) {
        // All other errors (404, 500, etc) means that the server responded,
        // which means that there are network connectivity
        IS_ONLINE = true; // We are now online
        $(window).trigger('online'); // Raise the online event
      }
    }
  });
}

Vous pouvez l'utiliser comme ceci: 

// Hack to use the checkNetwork() function only on Firefox 
// (http://stackoverflow.com/questions/5698810/detect-firefox-browser-with-jquery/9238538#9238538)
// (But it may be too restrictive regarding other browser
// who does not properly support online / offline events)
if (!(window.mozInnerScreenX == null)) {
    window.setInterval(checkNetwork, 30000); // Check the network every 30 seconds
}

Pour écouter des événements hors ligne et en ligne (avec l'aide de jQuery): 

$(window).bind('online offline', function(e) {
  if (!IS_ONLINE || !window.navigator.onLine) {
    alert('We have a situation here');
  } else {
    alert('Battlestation connected');
  }
});

Depuis récemment, navigator.onLine montre les mêmes sur tous les principaux navigateurs, et est donc utilisable. 

if (navigator.onLine) {
  // do things that need connection
} else {
  // do things that don't need connection
}

Les versions les plus anciennes qui prennent en charge ce dans le droit chemin sont: Firefox 41 , IE 9, Chrome 14 et Safari 5.

À l'heure actuelle représente presque toute la gamme des utilisateurs, mais vous devriez toujours vérifier ce que les utilisateurs de votre page ont des capacités.

Avant FF 41, il ne montre false si l'utilisateur a mis manuellement le navigateur en mode hors ligne. Dans IE 8, la propriété était sur le body, au lieu de window.

source: caniuse

navigator.onLine est un gâchis

Je fais face à ce en essayant de faire un appel ajax au serveur.

Il y a plusieurs situations possibles lorsque le client est hors-ligne:

  • les timouts d'appel ajax et vous recevez une erreur
  • le retour de l'appel ajax succès, mais le msg est nul
  • l'appel ajax est pas exécutée car le navigateur décide donc (peut être est-ce quand navigator.onLine devient fausse après un certain temps)

La solution que je me sers est de contrôler moi-même statut avec javascript. Je mets l'état d'un appel réussi, dans un autre cas, je suppose que le client est déconnecté. Quelque chose comme ceci: 

var offline;
pendingItems.push(item);//add another item for processing
updatePendingInterval = setInterval("tryUpdatePending()",30000);
tryUpdatePending();

    function tryUpdatePending() {

        offline = setTimeout("$('#offline').show()", 10000);
        $.ajax({ data: JSON.stringify({ items: pendingItems }), url: "WebMethods.aspx/UpdatePendingItems", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8",
          success: function (msg) {
            if ((!msg) || msg.d != "ok")
              return;
            pending = new Array(); //empty the pending array
            $('#offline').hide();
            clearTimeout(offline);
            clearInterval(updatePendingInterval);
          }
        });
      }

En HTML5, vous pouvez utiliser la propriété navigator.onLine. Regardez ici:

http://www.w3.org/TR/offline-webapps/# connexes

Probablement votre comportement actuel est aléatoire que le javascript ne préparèrent la variable « du navigateur » et sait si vous êtes hors ligne et en ligne, mais il ne fait pas vérifier la connexion réseau.

Faites-nous savoir si c'est ce que vous cherchez.

Cordialement,

S'il vous plaît trouver le module require.js que j'ai écrit pour Offline. 

define(['offline'], function (Offline) {
    //Tested with Chrome and IE11 Latest Versions as of 20140412
    //Offline.js - http://github.hubspot.com/offline/ 
    //Offline.js is a library to automatically alert your users 
    //when they've lost internet connectivity, like Gmail.
    //It captures AJAX requests which were made while the connection 
    //was down, and remakes them when it's back up, so your app 
    //reacts perfectly.

    //It has a number of beautiful themes and requires no configuration.
    //Object that will be exposed to the outside world. (Revealing Module Pattern)

    var OfflineDetector = {};

    //Flag indicating current network status.
    var isOffline = false;

    //Configuration Options for Offline.js
    Offline.options = {
        checks: {
            xhr: {
                //By default Offline.js queries favicon.ico.
                //Change this to hit a service that simply returns a 204.
                url: 'favicon.ico'
            }
        },

        checkOnLoad: true,
        interceptRequests: true,
        reconnect: true,
        requests: true,
        game: false
    };

    //Offline.js raises the 'up' event when it is able to reach
    //the server indicating that connection is up.
    Offline.on('up', function () {
        isOffline = false;
    });

    //Offline.js raises the 'down' event when it is unable to reach
    //the server indicating that connection is down.
    Offline.on('down', function () {
        isOffline = true;
    });

    //Expose Offline.js instance for outside world!
    OfflineDetector.Offline = Offline;

    //OfflineDetector.isOffline() method returns the current status.
    OfflineDetector.isOffline = function () {
        return isOffline;
    };

    //start() method contains functionality to repeatedly
    //invoke check() method of Offline.js.
    //This repeated call helps in detecting the status.
    OfflineDetector.start = function () {
        var checkOfflineStatus = function () {
            Offline.check();
        };
        setInterval(checkOfflineStatus, 3000);
    };

    //Start OfflineDetector
    OfflineDetector.start();
    return OfflineDetector;
});

S'il vous plaît lire ce billet de blog et laissez-moi savoir vos pensées. http: // zen -and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Il contient un exemple de code utilisant offline.js pour détecter lorsque le client est hors ligne.

vous pouvez détecter hors ligne façon cross-browser facilement comme ci-dessous 

var randomValue = Math.floor((1 + Math.random()) * 0x10000)

$.ajax({
      type: "HEAD",
      url: "http://yoururl.com?rand=" + randomValue,
      contentType: "application/json",
      error: function(response) { return response.status == 0; },
      success: function() { return true; }
   });

vous pouvez remplacer par yoururl.com document.location.pathname.

Le point crucial de la solution est, essayez de vous connecter à votre nom de domaine, si vous n'êtes pas en mesure de se connecter - vous êtes hors ligne. fonctionne navigateur croix.

J'utilise l'option REPLI dans le manifeste HTML5 cache pour vérifier si mon application html5 est en ligne ou hors ligne par: 

FALLBACK:
/online.txt /offline.txt

Dans la page html j'utiliser javascript tot lire le contenu du fichier txt en ligne / hors ligne: 

<script>$.get( "urlto/online.txt", function( data ) {
$( ".result" ).html( data );
alert( data );
});</script>

En mode hors ligne le script lira le contenu du offline.txt. Sur la base du texte dans les fichiers que vous pouvez savoir si la page Web est en ligne de hors-ligne.

Voici ma solution.

Testé avec IE, Opera, Chrome, FireFox, Safari, comme Phonegap WebApp sur IOS 8 et comme Phonegap WebApp sur les applications 4.4.2

Cette solution ne fonctionne pas avec FireFox sur localhost.

=============================================== ==================================

onlineCheck.js (filepath: « root / js / onlineCheck.js): 

var isApp = false;

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    isApp = true;
    }


function isOnlineTest() {
    alert(checkOnline());
}

function isBrowserOnline(no,yes){
    //Didnt work local
    //Need "firefox.php" in root dictionary
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","checkOnline.php",true);
    xhr.send();
}

function checkOnline(){

    if(isApp)
    {
        var xhr = new XMLHttpRequest();
        var file = "http://dexheimer.cc/apps/kartei/neu/dot.png";

        try {
            xhr.open('HEAD', file , false); 
            xhr.send(null);

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

        tmpIsOnline = navigator.onLine;

        if(tmpIsOnline || tmpIsOnline == "undefined")
        {
            try{
                //Didnt work local
                //Need "firefox.php" in root dictionary
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
                xhr.onload = function(){
                    tmpIsOnline = true;
                }
                xhr.onerror = function(){
                    tmpIsOnline = false;
                }
                xhr.open("GET","checkOnline.php",false);
                xhr.send();
            }catch (e){
                tmpIsOnline = false;
            }
        }
        return tmpIsOnline;

    }
}

=============================================== ==================================

index.html (filepath: "root / index.html"): 

<!DOCTYPE html>
<html>


<head>
    ...

    <script type="text/javascript" src="js/onlineCheck.js" ></script>

    ...

</head>

...

<body onload="onLoad()">

...

    <div onclick="isOnlineTest()">  
        Online?
    </div>
...
</body>

</html>

=============================================== ==================================

checkOnline.php (filepath: "root"): 

<?php echo 'true'; ?>

bien, vous pouvez essayer le javascript plugin qui peut surveiller la connexion du navigateur en temps réel et informe l'utilisateur si Internet ou la connexion des navigateurs avec Internet ont baissé.

Wiremonkey Javascript plug-in et la démo que vous pouvez trouver ici

  

http://ryvan-js.github.io/

Utilisation du corps du document: 

<body ononline="onlineConditions()" onoffline="offlineConditions()">(...)</body>

Utilisation Javascript événement: 

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

  function updateOnlineStatus() {

    var condition = navigator.onLine ? "online" : "offline";
    if( condition == 'online' ){
        console.log( 'condition: online')
    }else{
        console.log( 'condition: offline')
    }

  }

  window.addEventListener('online',  updateOnlineStatus );
  window.addEventListener('offline', updateOnlineStatus );

});

Référence :
Document-corps: ononline événement
Javascript-événement: en ligne et des événements hors ligne

Pensées supplémentaires: Pour expédier autour de la « connexion réseau n'est pas la même que la connexion Internet » problème des méthodes ci-dessus: Vous pouvez vérifier la connexion Internet une fois avec ajax sur le démarrage de l'application et configurer un mode en ligne / hors ligne. Créer un bouton de rebranchement pour l'utilisateur d'aller en ligne. Et ajouter à chaque requête ajax échoué une fonction qui botter le dos de l'utilisateur en mode hors-ligne.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top