Detect an Internet Connection using JavaScript

by

Hello Developer, If you need to check or detect an internet connection using JavaScript, then you can use its source code from this tutorial. But Before it, you should know everything about its usages & concept step by step. So that you can easily implement it in your project.

If you want to make your web application user-friendly then you should integrate an internet connectivity checker with javascript. So that users can easily get a notification of internet connection status and quickly understand that the internet is connected or lost.

Nowadays, many websites have Internet Connection status features. Even you have seen this feature on YouTube.

When you are watching YouTube videos and suddenly your internet connection is disconnected then you will see a notification like “you are offline” in a single gray progress bar at the bottom

Again you connect to the internet, then you will see a green progress bar with a notification like “you are back online”.

So, Don’t worry, You will also learn to create like this with the help of my shared code.

detect internet connection using jvascript

Steps to Check Internet Connection Status in JavaScript

Now I am going to create & check the internet connection status with javascript step by step with a complete source code. After learning & implementing it, you will get an alert progress bar at the top with some text information about internet connectivity. If your internet connection or wifi is lost, then It will info “you are offline” with a red progress bar. Even if your internet is connected again then it will info “you are back online” with a green progress bar.

Learn Also –

JavaScript Password Strength Checker

Cookie Consent Popup in JavaScript

How to create JavaScript Accordion

1. Create Internet Connection Notification

First of all, you need to create a div to display the internet connection status. So, you just copy this and paste it into <body> tag.

<div id="internetStatus"></div>

2. Design Internet Connection Notification

You can use the following CSS code to design a progress bar for showing internet connection status is offline or online. You can write more CSS code according to your website needs

<style type="text/css">
#internetStatus{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: white;
        }
    
    </style>

Explanation –

  • position: fixed;: Element is fixed on the viewport.
  • top: 0px;: Placed at the top edge.
  • left: 0px;: Aligned with the left edge.
  • width: 100%;: Spans full viewport width.
  • text-align: center;: Centers the text.
  • color: white;: Text color is white.

3. Detect Internet Connection status

This code detects the online/offline status of a device and updates an HTML element’s text and background color accordingly. It listens for specific events like page load, going online, and going offline, and uses the navigator.onLine property to determine the device’s internet connection status.

<script type="text/javascript">

const internetStatus = document.getElementById("internetStatus");

window.addEventListener('load', function(event){
    detectInternet();
});
window.addEventListener('online', function(event){
    detectInternet();
});
window.addEventListener('offline', function(event){
    detectInternet();
});

function detectInternet(){

  if(navigator.onLine){
     internetStatus.textContent="You are back online";
     internetStatus.style.backgroundColor="green";
  }else{
    internetStatus.textContent="No Internet Connection";
    internetStatus.style.backgroundColor="red";
  }
}
</script>

Steps to write code –

  • Get the HTML element with ID “internetStatus” and store it.
  • When the page loads, call the detectInternet() function.
  • When the device connects online, call detectInternet().
  • When the device disconnects, call detectInternet().
  • Define the detectInternet() function.
  • Check if the device is online.
  • If online, update the text and background color to green.
  • If offline…update the text and background color to red.

4. Check Internet Connection Status on Browser

Open your website in which you have added an internet connection status checker on a web browser. and test it yourself to connect or disconnect internet connection or wifi.

  • If you disconnect your internet then you will see a red progress bar with information like “you are offline”
  • If you connect your internet then you will see a green progress bar with information like “you are back online”