DEV Community

Detecting if the user is online with JavaScript

Chris Bongers on December 01, 2022

Sometimes you might want to enhance your application to notify users they might have lost their internet connection. Users might be visiting your ...

Read full post

artydev • Dec 1 '22 • Edited

Great Chris as usual :-)

A detail, instead of

 <div class="offline-msg">You're offline 😢</div> <div class="online-msg">You're connected 🔗</div>

Why not

 <div class="msg" data-status="offline">You're offline 😢</div> <div class="msg" data-status="online">You're connected 🔗</div>

And in your CSS

.msg[data-status='offline'] { color: red } .msg[data-status='online'] { color: green }

Regards

Chris Bongers • Dec 2 '22

We could do that indeed, really depends on the setup, but yeah this is quite neat 🥳

Bill💡 • Dec 2 '22

@artydev I would go one step further and put the status value as a class on the root html node. That way any other online/offline dependent elements can be captured. After all, the status is an aspect of the document as a whole!

html.online .msg { color: green } html.offline .msg { color: red }

Elements that are only available when online could be given the class online-only.

html.offline .online-only { display:none; }

artydev • Dec 2 '22

Thank you Bill, nice idea.
I have never thought to set a class on html tag...

Omri Lavi • Dec 2 '22

Hi Chris, thank you for this article! It was very interesting.
Keep in mind that relying on the browser alone may not be enough. In some scenarios the browser may falsly "think" it is connected, for example if connected to a network that has no connection to the internet. If the status is "offline" then there's no connection, but "online" does not necessarily mean a connection exists.

Chris Bongers • Dec 2 '22

Yeah correct, it's very rare you'll need this much detail.
In general for specific type of applications that would need this I think this will do, but if it highly depends on the status there are alternatives indeed.

Jozsef88 • Dec 9 '22

In case anyone uses react, here's a solution:

`import React, { useState, useEffect } from 'react';
import './OnlineStatus.css';

export default function OnlineStatus() {
const [status, setStatus] = useState('offline');

useEffect(() => { const onlineCheck = setInterval(() => { if (navigator.onLine) { setStatus('online'); } else { setStatus('offline'); } }, 1000) return () => { clearInterval(onlineCheck) }; }, []) return ( <div className="status"> <div style={status === "offline" ? { display: "block" } : { display: "none" }} className="offline-msg">Offline</div> <div style={status === "online" ? { display: "block" } : { display: "none" }} className="online-msg">Online</div> </div> )

Arun Bohra • Dec 5 '22

Hi Chirs, you can get true even when device can't access internet. Such as using software that use virtual ethernet adapters that are always "connected." Do you know something for that as well?

Chris Bongers • Dec 6 '22

That's very tricky, think only server side would be able to handle those events?
Like try to reach something (ping) and see if it actually responds?

qq449245884 • Dec 30 '22

Dear Chris Bongers，may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Chris Bongers • Jan 2 '23

Sure thing, go for it 🙏

Timothy Huang • Dec 4 '22

Very useful. Thank you.

fruntend • Dec 5 '22

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Chris Bongers • Dec 6 '22

Amazing! 🥳

Ewenike Chukwuemeka Emmanuel👨‍💻 • Dec 5 '22

This is nice..

premierdan • Dec 7 '22

Amazing

Jhon Janer Moreno Caceres • Dec 3 '22 • Edited

Thanks for sharing

Chris Bongers • Dec 2 '22

Thanks! glad you enjoyed it ❤️

Uploadcare • Dec 28 '22

This API is too unstable and usually you don't want to use it in production, because online in terms of user's browser may not be the same as online in terms of the user themselves.

There are better ways to detect offline:

Long-pooling request to the server.
Periodical check for a dummy image/resource without caching.
Showing such a status only when the user's request fails due to unstable network.

Relying on navigator.onLine only you may scare your user. So, please do not.