Detect Internet Connection Status In Browser

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello everyone πŸ‘‹

In this article, we are going to learn how can we detect the internet connection state on our website.

This can be very useful to improve user experience by showing snack messages or pop-ups when the browser is not able to connect to the internet.

Implementation

We can get the current state of the connection by using window.navigator.onLine, which will return a boolean value.

  • true if connected.
  • false if not connected.
const online = window.navigator.onLine;
if (online) {
  // Is connected to internet
} else {
  // Not connected to internet
}

If the browser doesn't support window.navigator.onLine the above example will always come out as false or undefined.

Connection State Changes Listener

We can also detect the connection state by listening for network state change events i.e, online and offline.

window.addEventListener('offline', function(e) {
    // Network disconnected
  }
);

window.addEventListener('online', function(e) {
    // Network connected
  }
);

It's very easy to implement but there are some side cases where it might give a false-positive result.

  • The computer is connected to a mobile hotspot, but mobile internet is not working then also you can get an online status.

  • The computer is running a virtualization software that has virtual ethernet adapters that are always "connected".


Thank you for reading πŸ™

If you enjoyed this article or found it helpful, give it a thumbs-up πŸ‘

Feel free to connect πŸ‘‹

Twitter | Instagram | LinkedIn

Interested in reading more such articles from Bibek Kakati?

Support the author by donating an amount of your choice.

Recent sponsors
Sai Ansul's photo

This is amazing! Never seen anything like this before!πŸ’―πŸ™Œ

Bibek Kakati's photo

Thank you for your comment.

Ezequiel E. Tejada's photo

Thank you for sharing.

Let me add something that may be useful: caniuse.com/online-status

Bibek Kakati's photo

Thank you for adding that.

Ayodele Samuel Adebayo's photo

thanks a lot for sharing this, this is a +1 for me

Bibek Kakati's photo

I'm glad you liked it.

Kieran Roberts's photo

This is something I've never seen before Bibek Kakati. Nice article, keep it up :)

Bibek Kakati's photo

Thank you! πŸŽ‰

Tomasz Gil's photo

Cool! I was wondering how apps like Google Docs does this. πŸ€” It seems that now I know! πŸ‘Œ

Bibek Kakati's photo

I'm happy to know that you learned something new. πŸŽ‰

Victoria Lo's photo

Wow I learned something new today! Thanks for sharing :)

Bibek Kakati's photo

Happy to know that 😊.

Catalin Pit's photo

This is really cool!

blackarc's photo

What about send a http request to google.com to test out status of internet connection, no question of false positive there?

Bibek Kakati's photo

Yeah, that is a normal workaround and you will get the current status but it can't replace the listener. To achieve the behavior of the listener, you will have to implement a polling mechanism.

Andrei Terecoasa's photo

Nice. Thank you. Definitely gonna play with it. Always found it cool that Facebook was able to tell me that I have no internet connection before I even knew it πŸ˜‚

Bibek Kakati's photo

You can use it on your next web project.

And thank you for your comment Andrei Terecoasa.