Display online offline connection status in JavaScript using Offline.js

In this tutorial we will learn about Offline.js which automatically display online/offline indication to the users using JavaScript.

Click here to visit Offline.js GitHub repository.

<!-- offlinejs --><!-- offlinejs ends here -->

Install

Get the latest release from Offline.js GitHub repository.

Step 1: Include the script

Include the offline.js script in the page.

<script src="path/to/offline.js"></script>

Step 2: Include a theme

Include one of the theme in the page.

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

Step 3: Include a language

Include one of the language in the page.

<link rel="stylesheet" href="path/to/themes/offline-language-english.min.css">

Go offline

In order to check whether Offline.js is working simply disconnect your internet and you will see a message saying you are offline.

Example

Configure Offline.js

To configure Offline.js we assign the following settings to the Offline.options property.

Offline.options = {
  // to check the connection status immediatly on page load.
  checkOnLoad: false,

  // to monitor AJAX requests to check connection.
  interceptRequests: true,

  // to automatically retest periodically when the connection is down (set to false to disable).
  reconnect: {
    // delay time in seconds to wait before rechecking.
    initialDelay: 3,

    // wait time in seconds between retries.
    delay: 10
  },

  // to store and attempt to remake requests which failed while the connection was down.
  requests: true
};

Default behaviour

By default, Offline.js makes an XHR request to load the /favicon.ico file from your server. And if your server has a favicon.ico file Offline.js will get a success else 404. In both the cases Offline.js will be able to determine that the connection is up and you are connected to the Internet.