How to check internet connection status in JavaScript

In today’s world, the internet is an essential part of our lives. Whether it’s for work, entertainment, or communication, we rely on the internet to stay connected with the world around us. However, there are times when our internet connection can be spotty or slow, causing frustration and inconvenience. Fortunately, JavaScript provides a way to check the internet connection status of a user’s device. In this article, we will explore the various methods of checking internet connection status in JavaScript and how to implement them in your code.

Understanding Internet Connection Status

Before we dive into the code, let’s first understand what we mean by internet connection status. Internet connection status refers to whether a user’s device is currently connected to the internet or not. There are several reasons why a device may not be connected to the internet, such as network outages, server issues, or a weak Wi-Fi signal.

Using the navigator.onLine Property

One way to check internet connection status in JavaScript is to use the navigator.onLine property. This property returns a Boolean value that indicates whether the browser is currently online or not.

if (navigator.onLine) {
  console.log("Device is online");
} else {
  console.log("Device is offline");
}

In this example, we are using an if-else statement to check whether the device is online or offline. If the navigator.onLine property returns true, we print the message “Device is online.” Otherwise, we print “Device is offline.”

Using the Online and Offline Events

Another way to check internet connection status in JavaScript is to use the online and offline events. These events are fired when the device goes online or offline, respectively.

window.addEventListener("offline", function() {
  console.log("Device is offline");
});
window.addEventListener("online", function() {
  console.log("Device is online");
});

In this example, we are using the addEventListener method to listen for the offline and online events. When the device goes offline, the message “Device is offline” is printed to the console. When the device comes back online, the message “Device is online” is printed.

Using AJAX Requests

Another way to check internet connection status in JavaScript is to use AJAX requests. AJAX requests are asynchronous requests that are made to a server without the need to refresh the page. By using AJAX requests, we can check whether the device is connected to the internet by sending a request to a server and checking for a response.

function checkInternetConnection() {
  const xhr = new XMLHttpRequest();
  xhr.open("HEAD", "https://www.google.com", false);
  try {
    xhr.send();
    if (xhr.status >= 200 && xhr.status < 300) {
      return true;
    } else {
      return false;
    }
  } catch (error) {
    return false;
  }
}

if (checkInternetConnection()) {
  console.log("Device is online");
} else {
  console.log("Device is offline");
}

In this example, we are using the XMLHttpRequest object to send a HEAD request to the Google website. We then check the status code of the response to determine whether the device is online or offline.

Conclusion

In conclusion, there are several ways to check internet connection status in JavaScript. Whether you prefer using the navigator.onLine property, the online and offline events, or AJAX requests, each method has its own advantages and disadvantages. By implementing these methods in your code, you can ensure that your users have a seamless experience