How to Check if User is Online or Offline in Javascript
In this tutorial, you will learn how to check if user is online or offline in javascript. As you already know, if you want to perform an activity on any website then you have to be connected to the internet.
The moment you connect to the internet, your status is considered to be online and once you are disconnected, your status is considered to be offline.
There are multiple ways and even third-party javascript libraries to detect the status of connectivity. The simplest solution for this problem will be Navigator API and online
and offline
events.
The Navigator API contains onLine
property and it returns a Boolean value depending upon the state of your connectivity. The online
and offline
events get fired whenever there is a change in the state of connectivity.
In the following example, depending on the connectivity of the user, we will display offline or online on the screen. Please have a look over the code example and the steps given below.
HTML & CSS
- We have 2 elements in the HTML file (
div
andspan
). Thediv
element with a class ofcontainer
is just a wrapper for thespan
element. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div id="container"> <span></span> </div> <script src="script.js"></script> </body> </html>
#container { width: 100%; border: 1px solid black; text-align: center; color: #fff; }
Javascript
- We are getting the initial state of connectivity by using the
onLine
property and storing it in thestatus
variable. ThisonLine
property returns a Boolean value. - We have 2 methods,
online()
andoffline()
. Theonline()
method will change the background color of thediv
element to green and display the text“Online”
in thespan
element. Theoffline()
method will change the background color of thediv
element to red and display the text“Offline”
in thespan
element. - If the
status
istrue
, that means we are connected to the internet and will execute theonline()
method. - If the
status
isfalse
, that means we are not connected to the internet and will execute theoffline()
method. - We have attached
online
andoffline
events listener to thewindow
object. Depending upon the event, it will execute the corresponding method.
const status = window.navigator.onLine; if(status) online() else offline() window.addEventListener('online', online); window.addEventListener('offline', offline); function online(){ document.getElementById('container').style.backgroundColor = 'green'; document.querySelector('span').textContent = 'Online'; } function offline(){ document.getElementById('container').style.backgroundColor = 'red'; document.querySelector('span').textContent = 'Offline'; }