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…


This content originally appeared on DEV Community and was authored by Bibek

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

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.




This content originally appeared on DEV Community and was authored by Bibek


Print Share Comment Cite Upload Translate Updates
APA

Bibek | Sciencx (2021-05-12T15:18:12+00:00) Detect Internet Connection Status In Browser. Retrieved from https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/

MLA
" » Detect Internet Connection Status In Browser." Bibek | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/
HARVARD
Bibek | Sciencx Wednesday May 12, 2021 » Detect Internet Connection Status In Browser., viewed ,<https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/>
VANCOUVER
Bibek | Sciencx - » Detect Internet Connection Status In Browser. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/
CHICAGO
" » Detect Internet Connection Status In Browser." Bibek | Sciencx - Accessed . https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/
IEEE
" » Detect Internet Connection Status In Browser." Bibek | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/. [Accessed: ]
rf:citation
» Detect Internet Connection Status In Browser | Bibek | Sciencx | https://www.scien.cx/2021/05/12/detect-internet-connection-status-in-browser/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts