For those still wanting to use this

[synapt]

If you like the general appearance/theme of the options this script give you but don't feel like dealing with the oddities in trying to use it since it's abandonment, there's a bit of a generic work around using modern browser events and not needing to use offline.js as a script.

Take the theme file of the notification style you'd like and make sure it's included in some form or another (whether pasted into a master .css or link'd in, etc), and then in your header file/page you want this feature on/etc, paste the following;

<div id="connection_status" class="offline-ui offline-ui-up offline-ui-waiting"><div class="offline-ui-content"></div></div>

Obviously the element ID can be whatever you want it to be, just adjust it into the code below.

And then wherever it most fits in your javascript lineup include something like this;

    window.addEventListener('online', function(e) {
        $("#connection_status").removeClass();
        $("#connection_status").addClass('offline-ui offline-ui-up offline-ui-up-2s offline-ui-up-5s');
    }, false);
    window.addEventListener('offline', function(e) {
        $("#connection_status").removeClass();
        $("#connection_status").addClass('offline-ui offline-ui-down offline-ui-waiting');
    }, false);

These are native events that should work in just about anything supporting HTML5 both mobile and desktop as far as testing the major and semi-major browsers I did, which obviously means in this modern age the vast majority if not all of your likely users.

This of course is also using jQuery (which anyone looking for a model like this is probably already using). If you would like a 'pure' Javascript format, this SHOULD work I believe in just about everything (except maybe under IE11 or IE10, which if aiming for decent HTML5 support probably isn't a concern for IE <= 10) and if anything might be a bit smoother looking even than the jQuery implementation;

    var connStatus = document.getElementById("connection_status");
    window.addEventListener('online', function(e) {
        connStatus.className = 'offline-ui offline-ui-up offline-ui-up-2s offline-ui-up-5s';
    }, false);
    window.addEventListener('offline', function(e) {
        connStatus.className = 'offline-ui offline-ui-down offline-ui-waiting';
    }, false);

This can also be considered somewhat relative to issue #135 and an up to date consideration to it.

Notable caveat; This obviously does not include offline.js's capacity for event capturing and retrying during downtime.

It also removes the manual "reconnect" button, though this isn't perhaps a caveat since the native offline/online event listening polls are almost immediate and in effect obsolete the reconnect check button anyways.

This obviously also gives you a basis for modifying the available CSS themes into your own design.

[ranwang21]

These events indeed are useful to detect online offline, however, if your computer has installed some virtual machine software, such as Virtualbox or VMWare, the offline event won't fire. And the thing is we are not sure the client has installed a virtual machine or not on its computer.

[synapt]

These events indeed are useful to detect online offline, however, if your computer has installed some virtual machine software, such as Virtualbox or VMWare, the offline event won't fire. And the thing is we are not sure the client has installed a virtual machine or not on its computer.

Is there specific contexts you're saying this in relation to? Because I have virtualbox but ran into no issues like that as far as browser-usage goes, but I'll look into it to double check and be sure.

As far as I thought I remembered most browsers these days use their online/offline event handlers explicitly in relation to whether or not any polls against the website using the adapter in question at time of connection otherwise indicating activity.

If not I guess I could always provide a 3rd example for some generic xmlHttpRequest() poll if there isn't an already-existing one somewhere to link to.

[ranwang21]

These events indeed are useful to detect online offline, however, if your computer has installed some virtual machine software, such as Virtualbox or VMWare, the offline event won't fire. And the thing is we are not sure the client has installed a virtual machine or not on its computer.

Is there specific contexts you're saying this in relation to? Because I have virtualbox but ran into no issues like that as far as browser-usage goes, but I'll look into it to double check and be sure.

As far as I thought I remembered most browsers these days use their online/offline event handlers explicitly in relation to whether or not any polls against the website using the adapter in question at time of connection otherwise indicating activity.

If not I guess I could always provide a 3rd example for some generic xmlHttpRequest() poll if there isn't an already-existing one somewhere to link to.

I think the reason why you installed the virtual machine in your computer and still be able to fire the events is that you may not be connected to the virtual network, In my understanding of the documentation, the online or offline tests if the user is connected to a network, but not necessarily to the internet, as long as your ethernet card is being used, you are considered to be connected to a network, thus even a VPN would make you always 'online'. To make sure this is your case, you can simply have a check your ipconfig.

I tested online-offline events on Chrome console, and the events won't fire either I disconnect or reconnect the internet because the property window.navigator.onLine will always be true. I tested this on Chrome V83.0.4103.116.

BTW I think I'm not the only one who has this issue, for example, https://stackoverflow.com/questions/55375672/the-online-api-isnt-working-in-any-browser.

To avoid using Offline.js, I think we can test internet connection simply by sending ajax request in a setInterval, such as:

function checkConnection() {
    fetch('http://server/endpoint').then((response) => {
        if (!response.ok) {
            alert('Server unavailable, your state might be outdated.')
        }
    })
}

setInterval(checkConnection(), 5000)

The disadvantage of doing this is it will not only test if user is connected to internet, but also if the server is online; besides, lots of requests to the server.

[Patrickkk]

Also note that the online event doesn't mean online

https://developer.mozilla.org/en-US/docs/web/api/navigator/online

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.