Reference JavaScript
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.
Get the latest release from Offline.js GitHub repository.
Include the offline.js script in the page.
<script src="path/to/offline.js"></script>
Include one of the theme in the page.
<link rel="stylesheet" href="path/to/themes/offline-theme-default.min.css">
Include one of the language in the page.
<link rel="stylesheet" href="path/to/themes/offline-language-english.min.css">
In order to check whether Offline.js is working simply disconnect your internet and you will see a message saying you are offline.
Example
To configure Offline.js we assign the following settings to the Offline.options property.
Offline.options
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 };
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.
/favicon.ico