DEV Community

Cover image for Detect Internet Connection Status In Browser
Bibek
Bibek

Posted on • Edited on • Originally published at blog.bibekkakati.me

Detect Internet Connection Status In Browser

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
}
Enter fullscreen mode Exit fullscreen mode

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
  }
);
Enter fullscreen mode Exit fullscreen mode

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".


Originally published on blog.bibekkakati.me


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


If you like my work and want to support it, you can do it here. I will really appreciate it.



Top comments (4)

Collapse
 
jwhenry3 profile image
Justin Henry • Edited

I like the simplicity and the fact you list the edge cases that may cause inaccuracy.

I wonder what the consensus is on polling a same-host endpoint as a ping (by updating the response with the current timestamp) to check the connection can at least reach the remote destination

With WebSocket, this becomes slightly less important due to the connect and disconnect events firing as expected so long as reconnect is configured.

Collapse
 
bibekkakati profile image
Bibek

Polling is a good way, but to use it as an alternative to the listeners we will have to poll very frequently.
I prefer to use the listeners as those side cases are not so impacting. After a false-positive result, if we send a valid request and it fails, we will get to know about the false-positive status. At last, it depends on the application and it's working.

Collapse
 
ashishk1331 profile image
Ashish Khare๐Ÿ˜Ž

Simple feature and nicely explained. Such minute things makes the day! Thanks for writing this.

Collapse
 
bibekkakati profile image
Bibek

Thank you @Ashish.