Hey bro, you online?

#javascript #webdev #programming #tutorial

Sometimes the user might a have a bad internet connection which may cause your site to not function properly. So it sounds like a good idea to let your user know when the internet goes off.
And guess what? It is really easy to do using navigator.connection. Here is a basic example.

navigator.connection.onchange = function(){
    if(navigator.onLine){
        alert("Your internet connection is back");
    }else{
        alert("Your currently offline");
    }
}

Top comments (4)

Luke Shiru • Oct 18 '21

The issue with this approach is that you're basically always sending alerts, even if there was a change on the connection but the user is still online, so ideally you should have some kind of track of the previous state:

let { onLine } = navigator;

navigator.connection.addEventListener("change", () =>
    onLine !== navigator.onLine
        ? (alert(
                navigator.onLine
                    ? "Your internet connection is back"
                    : "Your currently offline"
          ),
          (onLine = navigator.onLine))
        : undefined
);