Offline.js - checking while online?

Question

Here is my code below.

Simply, I don't know how to make it that if the connection transitions from ONLINE to OFFLINE, that the event which updates the css (https://github.com/hubspot/offline) will be triggered.

If it goes from OFFLINE to ONLINE, then it updates within 10 seconds. But I'm not sure how to have it work in the other direction?

It seems if I call Offline.check(); manually it will update, but ideally I'd like it to do this automatically. Any ideas welcome.

Offline.options = {
    checkOnLoad: true,
    checks: {
        image: {
            url: 'http://example.com/image.gif'
        },
        active: 'image'
    },
    reconnect: {
        initialDelay: 10, // only check every 10 seconds
        delay: 10
    }
};

score 1 · Answer 1 · answered Apr 28 '15 at 07:53

1

You can use Offline.on(event, handler, context) to know when connection goes online/offline.

Like if connection goes offline

Offline.on('up', function gotOnline(){
  console.log("I am online");
})

Offline.on('down', function gotOffline(){
  console.log("I am offline");
})

answered Apr 28 '15 at 07:53

Yogesh Khatri

1,180
8
11

Thanks, unfortunately that didn't work though. I am testing it by using my mobile phone, and turning Wi-Fi off. I'd expect that would cause it to switch to offline, but it's not. I just never see anything but that green "Online" box. I don't know if it's relevant or not, but the app uses the appcache so it will work offline but I still need Offline.js so I know whether the internet connection is online or not. – b85411 Apr 28 '15 at 08:01

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

If you read the documentation here, You can see that offline has certain properties such as Offline.check(), Offline.state.

You can use either of these to display the CSS you need.

For example:

if(Offline.state=='down'){
    /*assuming that you have that div in your css set to hidden or something else*/
    $("#offlineDiv").show('100'); //Just an imaginary div
}

Then when connection goes offline.. Use

offline.on(down, handler)..

Now this handler makes use of that above piece of CSS switch to activate that div.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 28 '15 at 07:55

Magesh Kumaar

1,485
2
10
29

Sorry, I should have clarified in the initial message. I was using `Offline.on('confirmed-down', ...` and `Offline.on('confirmed-up', ...` as the event handlers. But neither these, or `up` and `down` are working when I'm making the Online to Offline transition. Offline to Online works fine. – b85411 Apr 28 '15 at 08:05

score 0 · Answer 3 · answered Jun 02 '16 at 04:35

0

Here is my code using ternary operator

connectionStatus = navigator.onLine ? 'online' : 'offline';
console.log(connectionStatus);

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

answered Jun 02 '16 at 04:35

Mahendra Kulkarni

1,437
2
26
35

Offline.js - checking while online?

3 Answers3

Linked