Archive for June, 2012

Weekly HTML5 Apps Links Series on Mozilla Hacks

FYI – Each week I post a list of resources on the Mozilla Hacks Blog that may be of interest to folks doing HTML5 development.

Here is this weeks – Weekly HTML5 Apps Developer Resources, June 20th 2012


Support Firefox Mobile – add this code to your site or blog !

Mozilla is the only browser vendor who’s mission is to promote open innovation on the world wide web.

This year we’ve been diving into Mobile web technology in big ways.

Please consider including the code below on your web site or your blog. (WordPress users you can simply include the code as a text widget, just remember to point the image links at images on your site.)

The script is simple.

1.) If the visitor is using Firefox (any version) – SayTHANKS !
2.) If the visitor is not using Firefox – check to see if they are using an Android device.
3.) If not, suggest they use Firefox.
4.) If they are using Android, suggest Firefox Mobile.

You can get much more fancy, but you get the idea.

THANKS ! If you add the code to your site – tweet the url to @MisfitGeek and I’ll re-tweet !


<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { 
   document.write("<h2>THANKS  for  Using  Firefox !!!</h2>") 
   document.write("<img src='http://misfitgeek.com/images/firefox3.jpeg' />");
} 
else {
   if (/Android[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { 
      document.write("<h2>Get Firefox MOBILE !</h2>");
      document.write("<a title='Get FireFox MOBILE!' 
	                  href='http://www.mozilla.org/en-US/mobile/'>
                      <img src='fennec-icon.jpeg' /></a><br />");
      document.write("<b>
                      Click the Tail & Get Firefox Mobile for Android!
                      </b>"); 
 }
   else {
      document.write("<h2>Please Consider  Using  Firefox !!!</h2>");
      document.write("<a title='Get FireFox !' href='http://getfirefox.org/'>
	              <img src='http://misfitgeek.com/static/getfirefox.png' />
                      </a>");
   }
}
</script>

A Usage Saver pattern for HTML Apps

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.


Mozilla Apps on Linux from the Community !

I’ve spent a great deal of time over the last six months focusing on HTML5 “apps”. There continues to be profound confusion about defining what exactly an HTML5 “app” is and that’s OK. One of the great things about HTML5 is the wide variety of ways that you can choose to use it.

One of the prospects that I’m most excited about is the ability to create applications with HTML5/CSS3/JavaScript that provide user experiences like that of a natively built apps.

Mozilla has been working on both a “Web Run Time”  to enable this type of development and a Marketplace for really broad distribution of such apps.

As a non-profit organization, Mozilla has limited funds and resources. We don’t have thousands, or even hundreds of software developers in our engineering teams to point at any given problem at any particular point in time.

What we DO have though is a great global community.

The size of our team has required that we not build the entire Web Run Time for all devices at the same time. To start with the largest user share we have focused on Windows and Mac first.

Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

My wishes have been answered by Marco Castelluccio. If Marco’s name is familiar to you it may be because he recently won the Mozilla Dev Derby contest for his IndexedDB entry.

Marco, a student, wrote and submitted the Web Run Time support to Firefox for Linux and it’s now available in the Firefox Nightly channel.

How cool is that?! – Real production features submitted by a community member on the same time line as the company’s own code.

Here is what the apps experience looks like on Linux.

First you need to install Firefox Nightly (as of this writing) and you don’t want to do it through the package manager / Nightly PPA as it tends to lag a bit. (If what I just said doesn’t make sense to you – just ignore it. Installation  is simple.

You will net Firefox Nightly for Linux at http://nightly.mozilla.org/

Download Firefox NightlyThe size of our team has required that we not build the entire Web Run Time for all devices at the same time. As the largest user share we have focused on Windows and Mac first. Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

Download the correct version, extract the files and put them where you want them.

If you double click on the extracted “firefox” binary file it should run (make sure permissions are set to allow execution).

Of course you can create a desktop shortcut or if you are using Ubuntu Unity you can pin Firefox Nightly there as well.

AS of this moment, the Mozilla Marketplace is in a “limited” beta so if you are not a Mozillian of a developer who previously submitted an app you won’t yet be able to get access to the store, but I’ll show you the acquisition process in as seen in Linux with Marco’s code.

When I click Log In I am prompted to authenticate with BrowserID.

BrowserID Log In

Note the message that confirms the Marketplace is not yet open to the general public.

Mozilla Marketplace Opening Soon

Now I’ll use the search feature to find my Round Time app.

Search Timer Apps

Mine is the second one so I’ll click to navigate to the KO Timer page on the Mozilla Marketplace.

When I click on the Install Button I get the permissions prompt.

Marketplace Install Permissions Prompt

When installation is compete I can search for and find the “KO Round Timer” in the application launcher (I’m using Ubuntu)

When I run the app here is what I see.

KO Timer Start Screen

You can also run the same app in Firefox at http://timer.koscience.com/

Running as an app on Ubuntu I can stick the KO Timer to the Unity Launcher…

KO Timer Stuck to Unity

Progress is a great thing and THANKS to Marco for his awesome work !