iOS 7.1.1 Safari browser messing up with online/offline status

Question

I have a cross browser online/offline test for a webpage designed to work on multiple browsers. It works with the free indicators :

• event listener on window
• event listener on document.body
• polling of the navigator.onLine variable

http://jsfiddle.net/3mMfG/

window.addEventListener("online", function() {
    document.getElementById('test1').innerHTML = "online";
}, false);

window.addEventListener("offline", function() {
    document.getElementById('test1').innerHTML = "OFFLINE";
}, false);


document.body.ononline = function() {
    document.getElementById('test2').innerHTML = "online";
};
document.body.onoffline = function() {
    document.getElementById('test2').innerHTML = "OFFLINE";
};


setInterval(function () {
    if (navigator && navigator.onLine) 
        document.getElementById('test3').innerHTML = "online";
    else
        document.getElementById('test3').innerHTML = "OFFLINE";
}, 500);

I used this piece of code on several iOS, Android or laptop browsers with success.

On a specific iOS 7.1.1 device it does not work. I have tested it on other iOS 7.1.1 devices with success, but on this specific one, when turned offline, after a few seconds (~5) all indicators come back to "online".

I have tested on multiple devices but was only able to reproduce the problem on this specific one. I turn it offline using the "flight save mode" button, no wifi nor bluetooth is allowed but after a few seconds, the online event is triggered in the browser and the navigator.onLine variable turns to true... Weird...

If you have any clue about what's happening, I will be delighted to exchange with you.

Please if you test the page with your device, do not hesitate to comment to let me know if it works on your device. Thanks

Answer 1

Resetting the network settings in the iOS Settings app corrected this behaviour...

Answer 2

For me it was giving error on iPhone 8 plus Simulator iOSv11. I had to Turn On "Allow HTTP Services" located as shown below in order to get navigator.onLine return true -

Under settings -> Developer -> "Allow HTTP Services"