How to check the internet connection status in JavaScript
By Faruque Ahamed MollickIn 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.
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.
Navigator.Online not work always, please provide any other solution.
You don’t have to define an interval, there are ‘ononline’ and ‘onoffline’ Window events.
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.
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.”);
};
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.”);
});
As of 26th April 2021, this example does not work and only gives “Online” status.