How to detect online/offline event cross-browser?

Question

Hi everyone,

I'm trying to accurately detect when the browser goes offline, using the HTML5 online and offline events.

Here's my code:

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

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

It works fine when I just hit "Work offline" on either Firefox or IE, but it's kind of randomly working when I actually unplug the wire.

What's the best way to detect this change? I'd like to avoid repeating ajax calls with timeouts.

Thank you!

Answer 1

Hey,

In HTML5 you can use the navigator.onLine property. Look here:

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

Probably your current behavior is random as the javascript only ready the "browser" variable and then knows if you're offline and online, but it doesn't actually check the Network Connection.

Let us know if this is what you're looking for.

Kind Regards,

Answer 2

if(!(navigator.onLine))
alert("U'r Browser seems to be Offline! \n Please,Disable Work Offline and Reload page");