How to check the internet connection status in JavaScript

In this tutorial, we are going to see how to check the internet connection on our browser using JavaScript so that it is possible to see if online or offline. Checking the internet availability is easy in JavaScript.

To check the internet connection status we are going to use the JavaScript navigator onLine property:

window.navigator.onLine

It will return a boolean true or false depending on the internet status. If the browser is connected to the internet, it will return the boolean true value and if not then it will return the boolean false value.

Below is a simple code example which will alert a message which tells us if the internet connection available or not:

var ifConnected = window.navigator.onLine;
if (ifConnected) {
  alert('Connection available');
} else {
  alert('Connection not available');
}

It will simply alert message. If the internet status change, it will not show the alert message again to inform us. After we reload or refresh the page, it will show the internet connection status.

Run your JavaScript code every n seconds using setInterval() method

What is the opposite of JavaScript push() method that works reverse?

Now, if we want to see the status change message with the internet connection close or start without page reload, then below is the JavaScript code that can do this:

  var ifConnected = window.navigator.onLine;
    if (ifConnected) {
      document.getElementById("checkOnline").innerHTML = "Online";
      document.getElementById("checkOnline").style.color = "green";
    } else {
      document.getElementById("checkOnline").innerHTML = "Offline";
      document.getElementById("checkOnline").style.color = "red";
    }

setInterval(function(){ 

  var ifConnected = window.navigator.onLine;
    if (ifConnected) {
      document.getElementById("checkOnline").innerHTML = "Online";
      document.getElementById("checkOnline").style.color = "green";
    } else {
      document.getElementById("checkOnline").innerHTML = "Offline";
      document.getElementById("checkOnline").style.color = "red";
    }

 }, 3000);

The above code will check the internet status every 3 seconds and it will set the status text to our paragraph. Below is the HTML of our paragraph:

<p id="checkOnline"></p>

When we run the code on our browser then when the network will be available, it will show a green text and when it will be offline, then it will show a red text.

8 responses to “How to check the internet connection status in JavaScript”

  1. Scott Coulson says:

    Does this work if I have 2 connections, one of which is connected to the internet and one that is connected to a local area network which is not connected to the internet? I typed, “window.navigator.onLine” in the developer console of Chrome and it returned true. Then I disconnected the connection that was connected to the internet and it still returned true.

  2. Hammad Ahmad says:

    Navigator.Online not work always, please provide any other solution.

  3. Madi Karimi says:

    You don’t have to define an interval, there are ‘ononline’ and ‘onoffline’ Window events.

  4. mama says:

    how dose it work no i want to now ples reply

  5. Kamil says:

    Hi. The navigator.onLine is not always telling you that the browser is actually able to connect to the Internet. Sometimes, if the connection with the local network is established, the value will be ‘true’, while there still could be no outgoing internet connection. This is not the best way.

  6. King says:

    I think it will be best to use the window (online and offline) events as mentioned by Madi Karimi.

    // Online Event – This will add an event listener that fires up when the browser has gained access to the network and the value of Navigator.onLine switches to true.

    Code:

    window.addEventListener(‘online’, (event) => {
    console.log(“You are now connected to the network.”);
    });

    or

    window.ononline = (event) => {
    console.log(“You are now connected to the network.”);
    };

    // Offline Event – This will add an event listener that fires up when the browser has lost access to the network and the value of Navigator.onLine switches to false.

    Code:

    window.addEventListener(‘offline’, (event) => {
    console.log(“The network connection has been lost.”);
    });

    or

    window.onoffline = (event) => {
    console.log(“The network connection has been lost.”);
    };

  7. King says:

    I think it will be best to use the window (online and offline) events as mentioned by Madi Karimi.

    window.addEventListener(‘online’, (event) => {
    console.log(“You are now connected to the network.”);
    });

    window.addEventListener(‘offline’, (event) => {
    console.log(“The network connection has been lost.”);
    });

  8. Anonymous Name says:

    As of 26th April 2021, this example does not work and only gives “Online” status.

Leave a Reply

Your email address will not be published. Required fields are marked *