Mozilla is building a HTML5 “Operating System” for devices named Boot-to-Gecko or B2G for short.

Due to the lightweight nature of B2G it will work on a wide variety of devices from high end to, shall we say modestly priced.

Gary Kovacs, Mozilla’s CEO, recently announced that the first Boot to Gecko  devices will be introduced in Brazil.

Most mobile service plans limit the amount of bandwidth a user is allocated each month. In many cell service customers in South America purchase cell service using “pay as you go” plans. Either way, apps that over consume band with will not be very well received so developers need to design their app interactions to minimize the amount of bandwidth they consume.

Applications on B2G will be built with HTML5 / CSS3 / JavaScript.

Frequently HTML5 apps use various service mechanisms to update their content. We can optimize the actual number of bytes required by those communications.

Another method that we can implement is to determine when the running application is not being used by the user.

One way to do this is to hook the DOM’s window.onblur and window.onfocus events implement a state manger with which we can track “Active” and “Suspended” state.

When the state is “suspended” the application would bypass any network activities.

Here is a quick sample of hooking the onblur and onfocus events.

HTML File


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/IsActive.js"></script>
</head>
<body class="active">
   <center>
      <br /><br />
      <h1>
         <p>
	      Processing is .... <br /><br />
	      <span id="active">ACTIVE</span>
	      <span id="suspended">SUSPENDED</span>.
	   </p>
      </h1>
   </center>
</body>
</html>


Note that we include a .css and a .js file and wecreate two divs – one to show when the window is active and the other to show when it is not active or “blurred”.


CSS File


.active #active, .suspended #suspended { 
   display: inline 
}

.active #suspended, .suspended #active { 
   display: none 
}

.active {
   background: white;
   color: black;
}

.suspended {
   background: black;
   color: white;
}


Some simple styles to change the background to reflect changes in state.


JavaScript File



function onBlur() {
	document.body.className = 'suspended';
};

function onFocus() {
	document.body.className = 'active';
};

if (/*@cc_on!@*/false)  // check for Internet Explorer
   {
	document.onfocusin = onFocus;
	document.onfocusout = onBlur;
   }
else
   {
	window.onfocus = onFocus;
	window.onblur = onBlur;
   }


The code to implement the state event handlers. Note the required hack for Internet Explorer.


To throttle our bandwidth consumption when the user has another application in the forground we would simpley add logic to the onBlur() & onFocus() functions to set and unset a state variable and then we would test the value of that variable before we make any network calls.