DEV Community

Cover image for πŸš€ Detecting If a User is Online/Offline with JavaScript

πŸš€ Detecting If a User is Online/Offline with JavaScript

Niall Maher on June 25, 2020

As developers, we sometimes get used to our great broadband in our offices and localhost being the fastest site ever with no network issues. In fa...
Collapse
 
jrdev_ profile image
Jr. Dev πŸ‘¨πŸΎβ€πŸ’»

Awesome post. It's not something I have really thought about before but I will start doing now

Collapse
 
nialljoemaher profile image
Niall Maher

Yes, definitely something to look into 😁

Collapse
 
shaijut profile image
Shaiju T

Thanks, Short and to the point article. I think most PWA apps does this.

Collapse
 
nialljoemaher profile image
Niall Maher

Not without diving into a service worker. It'll also only catch when network requests succeed/fail so you could add this to a PWA to create a richer experience. So this will actually update your UI when your connectivity changes rather than when you're actually making requests.

Collapse
 
dietergeerts profile image
Dieter Geerts

navigator.online on it's own for checking if a user is really online is not working. It only lets you know if there is network access, which isn't the same as "connected to the internet". So basically, it is useless, unless you application works in a closed off network or something....

Collapse
 
nialljoemaher profile image
Niall Maher

I've left a link to some of the issues with navigator.online in the article. Definitely not a good solution alone. The event listeners are the real magic for checking when people are using apps on the move.

Collapse
 
ben profile image
Ben Halpern

Great explanation. I feel like this really contextualizes how to implement this.

Collapse
 
nialljoemaher profile image
Niall Maher

Thanks Ben! Glad you enjoyed it. πŸ’œ

Collapse
 
dvg3012 profile image
dvg3012

Nice explanation!
Nevertheless, I recently had to implement such a feature and found the navigator online/offline not really reliable. Especially if you've to support different devices, browsers, OS and Frameworks(Electron, Cordova,...).
I went with a workaround consisting of the navigator API and a fetch request to an external endpoint to really make sure a connection exists.
Hope this helps, if someone struggles with the raw navigator API.

Collapse
 
nialljoemaher profile image
Niall Maher

Totally agree, this isn't a silver bullet! This is just one of the ways to handle things. I use this combined with service workers and error handling.

Collapse
 
paramsiddharth profile image
Param Siddharth

That will help a lot! :)
I wonder, is there a straightforward implementation to verify whether or not Internet is accessible when "online"?

Collapse
 
nialljoemaher profile image
Niall Maher

When it comes to the actual network requests and that I find service workers are one of the best ways to serve up different things based on failed requests.

Collapse
 
hanzlahabib profile image
hanzlahabib

It really don't work for network disconnect, it only listens to dev tool throttling, please confirm if anyone else have faced this issue

also MDN web docs state it's isn't fully reliable for checking & they recommend to use XHR response for network offline confirmation

Thanks

Collapse
 
adeyemitj profile image
Adeyemi Taiwo

Great tutorial! Thanks for sharing.

Collapse
 
ondevai profile image
Luddite

navigator.online cannot be trusted: there's the "liefi" situation where you appear to be online but still cannot access the internet.

Collapse
 
timothyokooboh profile image
timothyokooboh

Thank you Niall. I have learned something new.

Collapse
 
nialljoemaher profile image
Niall Maher

Glad it helped 😁

Collapse
 
abdulghani200 profile image
Abdul Ghani

Awesome! 😁

Collapse
 
nialljoemaher profile image
Niall Maher

Thanks πŸ’œ

Collapse
 
ravikiran profile image
Ravikiran

Awesome

Collapse
 
nialljoemaher profile image
Niall Maher

Cheers πŸ’œ

Collapse
 
trasherdk profile image
TrasherDK

While the navigator.onLine thingy is a neat trick, it's not that useful information.

Knowing if connections to back-end services are up/down would be something.

Collapse
 
ineam profile image
Amine M

This is cool, thanks for sharing with us Niall

Collapse
 
nialljoemaher profile image
Niall Maher

Glad you enjoyed it!