Enhancing Flex applications with Google Gears

Google Gears is a very interesting platform. It’s a browser plugin that is aimed at extending the abilities of web browsers to satiate the needs of modern day rich web applications. The Gears website defines it as follows ..

Gears is an open source project that enables more powerful web applications, by adding new features to your web browser:

• Let web applications interact naturally with your desktop
• Store data locally in a fully-searchable database
• Run JavaScript in the background to improve performance

Gears today provides some very interesting features like a WorkerPool module to run JavaScript code in the background, without blocking the main page’s script execution, a LocalServer module that allows a web application to cache and serve its HTTP resources locally without a network connection, a Database module that provides browser-local relational data storage, a Desktop module that allows you to create desktop shortcuts for your web applications and more.

There are some very interesting features in the works as well like Desktop Notifications from browser apps, Multiple file select, resuming uploads, geolocation support etc.

All the above features have the potential of drastically changing the experience users have when using applications in the browser and that excites me

Many of these features can be very useful for applications that run in other plugins like Flash Player or Silverlight Player as well… while ideally all these abilities should be available within these other plugins natively, but the world of web development isn’t that ideal, is it?. Both Flash and Silverlight have the ability to communicate with the wrapping html page and hence they could potentially use the abilities that Gears provides via the wrapper. The obvious argument against this approach though would be that your application will become dependent on the availability of two plugins in place of one and that’s a bad move. However, that does not mean you should not take advantage of Gears in your Flex/Silverlight applications, it only means that you should use Gears in a way that your app does not become dependent on it. One approach, for example, could be to expose Gears dependent functionality to a user only when Gears is available on his machine and if its not available quietly and gracefully degrade the functionality. You could check if gears is present using the following code ..
 

if (window.google && google.gears) { 
       //gears is installed
}else{
     //gears is not installed
}

I’m sure you could come up with other such approaches, so I’d love to know your suggestions.

Meanwhile, I cooked up this little example Flex app that checks to see if Gears is installed and then allows the user to place a shortcut to the app on his desktop.
 

 
Although the code is well commented and self explanatory here are a few things I would like to point out …

• I have used the ExternalInterface class to communicate with the html wapper, you can read more about how this is done here in the docs.
• The gears api is needed to communicate with Gears, you can read about using the gears api here
• The first thing you will need to do to start communicating with Gears is include the gears_init.js in the html wrapper. You can do this by downloading the file to your source folder and including the below line of code in the index.template.html file in your Flex project

<script type="text/javascript"  src="gears_init.js"></script>

• I have used Abdul’s very cool JavaScript MXML component to include all my JavaScript code in my mxml file itself.

• Check out the example application
• View Source

Known Bug

The flex app temporarily blanks out when the Gears conformation dialog appears on FireFox 3 on MacOS. I’m not sure why this happens but it seems like a bug with FireFox.

Finally, do let me know your views on using Gears to enhance applications already dependent on another plugin like Flash Player or Silverlight Player.

Update:

The above blanking out problem could be an issue with flash player as well so I have submitted the issue as a bug to bugs.adobe.com, please vote it up.