One of JavaScript’s many features is the ability to detect whether a given browser is currently online or offline. This functionality is easily leveraged via the navigator object provided by your browser, but if you’re not a fan of writing your own Javascript code there’s a ready-made alternative you can use; the offline.js library.
Why should you detect the browser state?
Alright, so before we start adding libraries and generally making a mess we need to ask ourselves a question; what possible benefit is there to detecting the browser state? Picture the situation; you’re feverishly working on a long article or custom HTML code, and then when you click the "Save" button to store all your lovely work, something craps out on you and you’re left with a blank page where your work once was. Every single one of us has encountered such an issue before; it’s like a right of passage for any computer uses that at least once they lose part of their content because the server doesn’t respond or the network connection goes down.
Of course, for the most part modern browsers will store stuff in its cache, offering a lifeline when you’re locked out of the net, but sometimes requests are sent via AJAX. This is a bit more of an issue because you won’t even notice something’s gone wrong until you try to preview your new content and the changes haven’t taken effect, because the only place you can see AJAX errors is in your browser console, which most of us aren’t inclined to check in the middle of writing. Don’t worry though; the aforementioned JavaScript library is here to help!
Offline.js – Handle your users losing their internet connection like a pro
Offline.js is a really lightweight script (only 3kb in minified and compressed format) which works with no dependencies and is supported by modern versions Chrome, Firefox and IE (version 8 and above). What does it do? Offline.js detects when you browser goes offline provides unobtrusive but noticeable alerts and extra information, like re-connection time if known. It comes with multiple ready to use CSS styles and languages, so you pick a custom style that works for you. One of the main features it boasts is AJAX (asynchronous) request monitoring, so even when the page you’re working on is not refreshed it will still detect and react to any connection issues. There are a lot of options available too for adding your own twist to the basic functionality to suit your requirements.
The way that offline.js achieves all this is really quite simple – it sends an HTTP request to a specific file on your server regularly as per a defined interval; if it can’t complete the request, then it knows something’s up and it reacts accordingly. By default this file is set to favicon.ico, which is quite reasonable choice because most websites contain a favicon file in the main directory. Of course by creating a configuration object you can provide your own path to the file and change most of the plugin settings.
By extending the Offline object with the options property you can set params like:
- checking connection status immediately after page load
- monitoring AJAX events
- reconnect and reset connection timeouts
- request cache
- and some bonus features like an entertainment mode
Installation
To use offline.js you just need to download the .js file from GitHub and choose a theme. The authors have provided multiple styles to pick from, including wide top bars and small indicators displayed as a badge in one of your browser window corners. The main JavaScript file should be included in the HEAD section of you website and we’ve described on our blog multiple times how to extend you WordPress or Joomla! installation with 3rd party scripts. The CSS theme may be included as a separate CSS file in the template/theme head section or copied to an existing template CSS file (template.css).
After importing the main JS file and CSS styles we need to initialize the script and set the interval for the internet connection check. To make sure everything works smoothly we need to include the following script inside the HEAD section of the template or website in general.
var run = function(){
if (Offline.state === 'up')
Offline.check();
}
setInterval(run, 5000);
This simple function checks the internet connection status every 5 seconds (5000 milliseconds) and displays offline information when the check fails to complete.
If you need to customize the plugin translation you’ll find it’s very easy to do, because all the text that appears when the internet connection goes down are included in the CSS file. While selecting a theme from the plugin repository you can download a translated CSS file for French, Portuguese or Spanish. It’s also no problem to translate it to any language by using the default English style and editing all the content properties inside the file, such as in the below example:
.offline-ui.offline-ui-up .offline-ui-content:before {
content: "Your computer is connected to the internet.";
}
Entertain mode
One of Offline.js’ fancy features is a game mode which allows your customers to play a game when the browser is offline! On the GitHub repository apart from the obvious offline.js file there is also another file called snake.js which should be added to the same place where you imported the main library. Then in the main template JS file (gk.script.js) create an offline configuration object and enable the game by adding:
Offline.options = { game: true }
and now you visitors may play a game of snake when your browser runs into a connection problem.