Subscribe

Detecting if the user is online with JavaScript

โœ๏ธ

How can we detect if the user is online or offline with JavaScript

1 Dec, 2022 ยท 4 min read

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

Users might be visiting your website and receiving a cached version, so it can often appear that their internet is still working. However, they lost a connection under the hood, and nothing new will load.

This is where it can be beneficial to show them some messages to let them know they should check their connection.

Detecting connection status

We can leverage the navigator.onLine API to detect the connection status. This will return a boolean to indicate whether the user is online.

Note: Be aware browsers implement this differently so results may vary.

This would work great on the initial load so we could do something like this.

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

But we won't know if the network status changes after load, which is not ideal.

We can subscribe to offline and online events to listen to those specific changes.

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

Demo

Let's set up a quick demo to demonstrate this. We'll be using a basic text element in the center of the screen, but you can, of course, style and implement this in whatever way you like.

Note: I'm using SCSS to style this

<div class="status">
  <div class="offline-msg">You're offline ๐Ÿ˜ข</div>
  <div class="online-msg">You're connected ๐Ÿ”—</div>
</div>

We are building this with the premise that the default is a connected state.

Let's add some basic styling to the mix.

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

This would, by default, only show the online message ever. Let's add a condition that if the status element has an offline class, we switch the two divs.

.status {
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
}

Now, if we add the offline class to the status div, we should see the offline message.

So how can we switch these based on the network status?

const status = document.querySelector('.status');
window.addEventListener('load', () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove('offline');
    } else {
      status.classList.add('offline');
    }
  };

  window.addEventListener('online', handleNetworkChange);
  window.addEventListener('offline', handleNetworkChange);
});

Yep, this piece of code does the trick! We initialized this on the first load and created a new function to check the navigator status.

Then we add event listeners to listen to the changes so we can act based on them. On change, it can add or remove the class name.

If we try it out, it looks like this.

Or give it a try on this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Removing all vowels with JavaScript

3 Dec, 2022 ยท 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 ยท 3 min read

10 games to learn JavaScript

Join 1980 devs and subscribe to my newsletter