How to Check if user is Online or Offline using Offline.js

Offline.js is a JavaScript library to detect if a user is connected to the internet or not. It displays an alert message when the internet connection is lost similar to Facebook and Gmail.

It has different types of themes like – Default, Chrome, Dark, Hubspot, and Side to display alert message.

By default, it uses favicon.ico to check the internet connection but you can change it.

In this tutorial, I show how you can check if user is online or offline using the Offline.js library.

How to Check if user is online or offline using Offline.js

Demo Download

Download Offline.js
Add script
Themes
Demo
Conclusion

1. Download Offline.js

Download the library from GitHub.

2. Add Script

First include the following files –

<!-- Theme -->
<link rel="stylesheet" href="offline/themes/offline-theme-default.css" />

<!-- Language -->
<link rel="stylesheet" href="offline/themes/offline-language-english.css" />

<!-- JS -->
<script type="text/javascript" src="offline/offline.min.js"></script>
<script type="text/javascript" src="offline/js/snake.js"></script>

Theme – I am using the default theme. You change it to any other theme.

Language – Alert text language. If this is not included then text will not visible in the alert. It supports many languages like – English, Arabic, German, Spanish, etc. You can find all languages CSS files in the themes/ folder.

JS – Include offline.min.js and snake.js. Here, snake.js is optional, if you have set game: true in Offline option then you need to include this otherwise skip it.

Script –

Set Offline options –

checkOnLoad – It takes a boolean value. I set it to false. If it is set to true then it immediately checks the internet connection on the page load.
interceptRequests – Set it to true. If set to true then it monitors AJAX requests.
requests – If set to true then it will reattempt the failed AJAX requests when again connected to the internet.
checks – By default, it sends an XHR request to check the favicon.ico file on the site. If it returns 404 means the connection is lost. If the favicon.ico file is not available on your site then you can change it with any other file.

Pass file path in url.

You can also specify URL instead of using image file path.

checks: {xhr: {url: 'checkconnection.php'}},

Here, I just created empty checkconnection.php file in the project.

game – If it is set to true then a snake game show when the user is not connected to the internet. But you need to also include the snake.js file.

Using setInterval() check if the user is still connected to the internet or not on a regular intervals. Here, Offline.state returns the current connection status up or down, and Offline.check() checks the current status of the connection.

Completed Code

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="https://makitweb.com/demos/offlinejs/makitweb-logo.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Check if user is Online or Offline using Offline.js</title>

    <!-- Theme -->
    <link rel="stylesheet" href="offline/themes/offline-theme-default.css" />

    <!-- Language -->
    <link rel="stylesheet" href="offline/themes/offline-language-english.css" />

    <!-- JS -->
    <script type="text/javascript" src="offline/offline.min.js"></script>
    <!-- <script type="text/javascript" src="offline/js/snake.js"></script> -->

</head>
<body>
    <h1 style="margin-top: 100px;">Offline.js</h1>
    <p>Turn off internet connection from your system to check.</p>

    <!-- Script -->
    <script type="text/javascript">
    Offline.options = {
          // Should we check the connection status immediatly on page load.
          checkOnLoad: false,

          // Should we monitor AJAX requests to help decide if we have a connection.
          interceptRequests: true,

          // Should we store and attempt to remake requests which fail while the connection is down.
          requests: true,

          // Change default file check
          //checks: {image: {url: 'makitweb-logo.png'}, active: 'image'},
          checks: {xhr: {url: 'checkconnection.php'}},

          // Should we show a snake game while the connection is down?
          //game: true
    }

    var run = function(){
         if (Offline.state === 'up')
              Offline.check(); 
    }
    setInterval(run, 5000);

    </script>

</body>
</html>

3. Themes

It provides the following types of themes –

Default

<link rel="stylesheet" href="offline/themes/offline-theme-default.css" />

Chrome

<link rel="stylesheet" href="offline/themes/offline-theme-chrome.css" />

Dark

<link rel="stylesheet" href="offline/themes/offline-theme-dark.css" />

Hubspot

<link rel="stylesheet" href="offline/themes/offline-theme-hubspot.css" />

Side

<link rel="stylesheet" href="offline/themes/offline-theme-slide.css" />

For using a theme you just need to include the theme CSS file.

4. Demo

View Demo

5. Conclusion

To check if it is working or not just disconnect your system from the internet.

Make sure to test it on a live website, not on localhost.

If you are using CDN or caching enabled on your site then it is better to specify the file URL like – checkconnection.php instead of checking the image file.

I tested it on my site it does not always work when checking image file.

If you found this tutorial helpful then don't forget to share.