FailSafeA jQuery Plugin to make your App Robust

.:.: How this plugin gonna help you?

Prevention is better than Cure

This is a famous saying and it matters a lot while making robust applications. This plugin does its part to help you achieve that.

FailSafe is a jQuery plugin to help your application work correct even in peril situations. In other words, it takes care of situations like Lost Internet Connectivity and Low Battery Level. When a user loses Internet Connectivity or his laptop's Charge goes down, this plugin shows a very user-friendly message to the user. Optionally, this plugin can also disable some of the elements in the page which may require proper Internet Connectivity or Higher Battery Level to function properly.

.:.: Screenshots

.:.: Demo

To experience how this plugin works you just need to disconnect your Internet Connection or bring your laptop's Battery Level below 15% while keeping it still unplugged or both.

If the plugin is initialized with disableElements:[jQuery/CSS selector] then those elements will be disabled for the two peril situations stated above.

See this Sample Form's Submit Button below,

Sample Form

Heads Up! This plugin will be supporting LocalStorage in its next release.
Note: As of Aug 2013, the Battery Level detection functionality of this plugin only works in Firefox.

.:.: Spread the Word

Give a few seconds to appreciate my work before we get started on how to use it.

   

.:.: Getting Started

You need to include a total of 3 files to use this plugin, just keep in mind that failsafe.js file to be included after the jQuery Library -

  • jQuery Library File
  • failsafe.css
  • failsafe.js

<html>
    <head>
        <script src="js/jquery-1.8.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
        <script src="js/failsafe.js"></script>
    </head>
</html>

.:.: Usage

Now this is where FailSafe plugin is unique, it can be used in two ways:

Method 1:

If your app makes a XHR request somewhere than you can simply call $.failsafe.onOffline(options) and $.failsafe.onOnline(options) methods like shown below:

var XHR_function = function(url) {
    var xhr;  
    if (window.XMLHttpRequest) {
        xhr=new XMLHttpRequest();
    }
    else {
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.onreadystatechange = function(e) {
        if (xhr.readyState != 4) {
        return;
        }
        if (xhr.status == 200) {
            $.failsafe.onOnline(options);
        } else {
            $.failsafe.onOffline(options);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
};
Method 2:

If your app doesn't make a XHR request anywhere in the page (like this current page) then call the $.failsafe(options) method like shown below:

<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
<script src="js/failsafe.js"></script>
<script>$.failsafe({checkUrl:'test.html'});</script>
</head>
</html>



The FailSafe plugin in this page is implemented via "Method 2", the code below shows how its called:

<script>
$(function(){
$.failsafe({checkUrl:'test.html',checkInterval:5000,disableElements:".btn"});
});
</script>

.:.: Download

You can directly download the zip file or goto to GitHub for a Fork or Clone:

Download    Download from Github

.:.: Options

Variable Description Default Value Valid Values
checkUrl Link to any accessible file (Not Required for Method 1 but Mandatory for Method2) null "index.html" "img/picture.png"
checkInterval Time Interval in milliseconds. After this interval the plugin will check for Internet Connectivity 10000 Any Number (possibly greater than 2000 or 3000 depending on your server)
onlineMsg Message shown when the user gets online after being disconnected Great! You are now online Any String
offlineMsg Message shown when user is disconnected from the Internet Oops! you are not connected to the internet Any String
chargingMsg Message shown when the laptop is plugged-in after the Battery gets below the chargeThreshold percentage Your battery is now charging, carry on with your work! Any String
batteryLowMsg Message shown when the battery runs below the chargeThreshold percentage and is not in charging mode Battery is quite low to continue, please plug in your laptop! Any String
bothDownMsg Message shown when both are down, Internet Connectivity as well as Battery Both, your network as well as battery are down! Any String
chargeThreshold Percentage of Battery Level after which this plugin will show a message 15 Any number between 0 to 100
disableElements jQuery/CSS Selector of the elements to be Disabled null "#id" ".class-name"
checkNet Tells the plugin whether to check for Internet Connectivity or not true Either true or false
checkBattery Tells the plugin whether to check for Battery or not true Either true or false
removeDelay Time delay in milliseconds taken to fade out the message 4000 Any Number
Note: I have shown only some of the Valid Values, there can be many more.

.:.: About the Developer

Hey peeps, I am Ram Patra. I am a Developer as well as Designer. After receiving a good response from my 1st plugin, AnimateScroll, I decided to make a little more complex plugin, and I ended up with this. Hope you all like it, do give your feedbacks @twitter, and like our page on facebook to stay abreast of all new updates.

Developed & Designed by Ram Patra
© Copyrights by Compzets.com