Comment détecter les événements en ligne/hors ligne à travers le navigateur ?

Question

J'essaie de détecter avec précision le moment où le navigateur est hors ligne, en utilisant les événements HTML5 online et offline.

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>

Cela fonctionne bien lorsque je clique sur "Travailler hors ligne" sur Firefox ou IE, mais cela fonctionne de manière aléatoire lorsque je débranche le câble.

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

Answer 1

Actuellement, en 2011, les différents fournisseurs de navigateurs ne parviennent pas à se mettre d'accord sur la manière de définir le hors ligne. Certains navigateurs disposent d'une fonction "travailler hors ligne", qu'ils considèrent comme distincte de l'absence d'accès au réseau, qui est elle aussi différente de l'accès à Internet. Tout cela est très compliqué. Certains fournisseurs de navigateurs mettent à jour l'indicateur navigator.onLine lorsque l'accès au réseau est perdu, d'autres non.

De la spécification :

Renvoie false si l'agent utilisateur est définitivement hors ligne (déconnecté du réseau). Renvoie true si l'agent utilisateur utilisateur pourrait être en ligne.

Les événements online et offline sont déclenchés lorsque la valeur de cet attribut change.

L'attribut navigator.onLine doit retourner false si l'agent utilisateur ne pas contacter le réseau lorsque l'utilisateur suit des liens ou lorsqu'un script demande une page distante (ou sait qu'une une telle tentative échouerait), et doit retourner true dans le cas contraire.

Enfin, la spécification note :

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

Answer 2

Les principaux fournisseurs de navigateurs ne s'accordent pas sur la signification du terme "hors ligne".

Chrome, Safari et Firefox (depuis la version 41) détectent automatiquement quand vous passez "hors ligne", ce qui signifie que les événements et les propriétés "en ligne" se déclenchent automatiquement lorsque vous débranchez votre câble réseau.

Mozilla Firefox (avant la version 41), Opera et IE adoptent une approche différente et vous considèrent comme "en ligne" à moins que vous ne choisissiez explicitement le "mode hors ligne" dans le navigateur, même si vous ne disposez pas d'une connexion réseau opérationnelle.

Il existe des arguments valables en faveur du comportement de Firefox/Mozilla, qui sont exposés 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/propriétés en ligne/hors ligne pour détecter s'il y a réellement une connectivité réseau.

Au lieu de cela, vous devez utiliser d'autres approches.

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

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

"Si l'API n'est pas implémentée dans le navigateur, vous pouvez utiliser d'autres signaux pour détecter si vous êtes hors ligne, notamment en écoutant les événements d'erreur AppCache et les réponses de XMLHttpRequest"

Ce lien renvoie à un exemple de l'approche consistant à "écouter les événements d'erreur d'AppCache" :

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

...et un exemple de l'approche "écouter les échecs de XMLHttpRequest" :

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

HTH, -- Chad

Answer 3

Il existe aujourd'hui une bibliothèque JavaScript open source qui fait ce travail : elle s'appelle Offline.js .

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

https://github.com/HubSpot/offline

N'oubliez pas de consulter l'intégralité du README . Il contient des événements auxquels vous pouvez accéder.

Voici un page de test . Il est beau et a une belle interface utilisateur de rétroaction d'ailleurs ! :)

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

Answer 4

La meilleure façon qui fonctionne maintenant 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

Answer 5

Navigator.onLine est un désordre

Je suis confronté à ce problème lorsque j'essaie de faire un appel ajax au serveur.

Il existe plusieurs situations possibles lorsque le client est hors ligne :

• l'appel ajax est interrompu et vous recevez une erreur
• l'appel ajax renvoie le succès, mais le msg est nul
• L'appel ajax n'est pas exécuté parce que le navigateur le décide (c'est peut-être pour cela que navigator.onLine devient false après un certain temps).

La solution que j'utilise est de contrôler moi-même le statut avec javascript. Je fixe la condition d'un appel réussi, dans tout autre cas, je suppose que le client est hors ligne. 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);
          }
        });
      }