How to check internet connection is available or not ?



In this tutorial, let's learn how can we check whether we are connected to the internet or not in javascript/ react/ angular.

In order to run our website smoothly, the availability of the internet plays an integral role. Without an internet connection, we can't run our application smoothly. So it becomes important, we consider the detection of the internet when it comes to creating a web application.


General Usecase

You need to display an alert in your web application when there is no internet connection, there is an internet connection and when you get connected to internet connection back (Back Online), just like in Youtube. This tutorial can help you understand the back online functionality of youtube.

Well, if you want to do this, it's an easy task. Let's see how can we achieve this functionality in the easiest possible way.


How Can We Check

You can use the onLine property of the navigator object to detect whether you are connected or not.

Modern Browsers have two window events that can help us to check whether we are connected to the internet or not.

navigator.onLine - 
window.ononline - Event to check if the internet connection went online.
window.onoffline - Event to check if the internet connection went offline.

navigator.onLine

onLine is one of the properties of the navigator object. The Javascript Navigator object is used for browser detection. It is used to fetch information such as appName, appCodeName, userAgent, etc. 

navigator.onLine property return a boolean value ( true/ false) whether or not the user is connected to the internet.

true -> When you are connected to the internet
false -> When you are not connected to the internet.


// true - When internet connection is detected.
// false - When internet connection is not detected.

   console.log(navigator.onLine)


window.ononline

window.ononline event gets called whenever you get back the internet connections. It can be used to implement the "Back online" type of functionality that is provided by Youtube.


window.onoffline

window.onoffline event gets called whenever you lose the internet connection. It can be used to detect whenever you get disconnected from the internet

Note - The ononline and onoffline events get called whenever the value of the window.navigator.onLine event gets changed.


You can register listeners for these events in the following ways - 

- Using addEventListener on the window, document, or document.body
- By setting the .ononline or .onoffline properties on document or document.body to a JavaScript Function object.
- By specifying ononline="..." or onoffline="..." attributes on the <body> tag in the HTML markup.



window.ononline = (event) => {
   console.log("Back Online")
};

window.onoffline = (event) => {
   console.log("Connection Lost")
};



Now you know how to check whether internet connection is available or not. Do share it with your friends. :)



Click to visit our Facebook Page

Click to join our Telegram Channel

Click to join our Facebook Group


Check out what's latest in ECMA 2020 

Difference Between Promise.all() and Promise.allSettled()

How To Create Time Slots in Javascript/ React/ Angular 

Click to join our Facebook Page

Click to join us on our Whatsapp Group


Please feel free to contact us on -
Facebook - https://www.facebook.com/geekstutorialpoint 
Contact us - https://www.geekstutorialpoint.com/p/contact.html

Post a Comment

1 Comments

Please feel free to contact, if you want any help regarding programming. Suggestions are always welcome.