Check if User is Offline/Online in JavaScript

Checking whether the user is offline or online has become an important use case because most of the websites user interfaces are constantly communicating with the web server for data transfer, and the functionality of the web application gets affected if the user loses the internet connection.

So in this tutorial, we will see some of the ways to detect when a user is offline and when the user comes back online to show some message on the website to inform the user about it.

The Browser Object Model

In the Browser Object Model, we have the JavaScript objects which are somehow useful in interacting with the browser like the Window object, Navigator object, Screen object, Document object, etc.

In this tutorial, we will be using two objects, namely,

1. Window Object

2. Navigator Object

Navigator.onLine Property

The Navigator object is used to interact with the user agent or browser software. We can get all the information about the browser using the Navigator object in Javascript.

The Navigator object's onLine property can be used to check if the user agent is connected to the internet or not. In this tutorial, we will be using this property.

Window Object Connection Events

Javascript provides two connection events for the Window object, which are:

1. offline: This event is fired when the browser loses the internet connection and the value of the Navigator.onLine property becomes false.

2. online: This event is fired when the browser's internet connection is restored and the value of the Navigator.onLine property becomes true.

Apart from these two events, we will also use the load event of the Window object which is fired when the browser window loads completely.

Check if User is Offline/Online

Now, in this tutorial, we will be using the Navigator.onLine property to check if the user is online initially, and we will also define event handler functions in JavaScript to handle the offline and online events of the Window object to monitor if the user loses the internet connection.

To check if the user is online or offline when the webpage loads, we can use the load event of the Window object, like this:

window.addEventListener('load', function(e) {
    if (navigator.onLine) {
        console.log('We\'re online!');
    } else {
        console.log('We\'re offline...');
    }
}, false);

And, we will add event handlers for the offline and online events of the Window object too:

window.addEventListener('online', function(e) {
    console.log('And we\'re back :).');
}, false);
            
window.addEventListener('offline', function(e) {
    console.log('Connection is down.');
}, false);

In the code above we have simply logged the messages in the console.

Now let's make a nice looking webpage using the Javascript code used above to show if the user is offline or online.

Conclusion:

So in this tutorial, we learned how we can check if the user is offline or online in Javascript and can perform some action like showing the user a message whenever the state of internet connection changes. I hope you liked this simple tutorial. If you face any issue implementing this, do share it in the comment section below.

You may also like:

• JavaScript Desktop/Browser Push Notification Example

• Building a Password Generator with JavaScript

• JavaScript Text to Speech using SpeechSynthesis Interface

• Capture Photo using Webcam in Javascript