Google Gears, Detect your Network

To demo the code that supports network detection, try enabling the "Work Offline" option in your browser. Note the "online" icon to the right.

Last March I attended the SysCon Ajax World event in New York City. One of the biggest questions about RIAs was the idea of maintaining data persistance and synchronization in an offline environment. In a completely webbed out world, no one really had an answer.

I remember hearing talk about Google Gears but no one really had implemented anything. It was a great idea but still very much a mystery. Since then quite a few company's have integrated Gears, such as Zoho and Remember the Milk.

Where's my Network!?

Step one in a Gears enabled application, detect that network! I've looked through the LocalServer, Database and Workerpool classes and that is all well and good. but the concept of offline work is something that is to be grasped before implemented.

To State or not to State

There are two fundamental approaches to a Gears enabled applications, modal and modeless. One is being that you provide your service seemless regardless of network status. This is where the decoupling really comes in handy. The other approach is to develop an offline state which has certain aspects of the application disabled because it just can't be cached or safely synchronized.

The richness of the application plays a big role in this decision. If you have a feed reader application you can probably get away with just serving locally stashed feed data. If you've got an application mashup with a Google Map, you'll probably opt for limiting that feature.

Regardless of your approach your application must be aware of its network status.

NetworkDetection to the Rescue

I saw the dojo's implementation of an "offline widget" and although I thought they did a great job, i've got to write it for prototype. And while I'm at it why not try to make it better.

I've been a big fan of the EventDispatcher class and its worked its way into quite a few of my implementations. It allows for the Hollywood Principle, AKA the Observer pattern. This allows for incredible decoupling and ultimately very reusable code.

The operation that is taking place to detect network is polling the url given in the constructor, if it fails or causes an exception to being offline it dispatches the offline event. When it regains network connection it dispatches the online event. The url the constructor is given should be simple and have no application logic. I would also highly advise not extending the class in any means of containing further application logic, rather use an instantiation and listen to its events or use the getStatus method.

The Code

• View a demo, pure and simple, a page devoted to just the necessities
• NetworkDetection
• Ajax.Application.Base
• EventDispatcher
• Ajax.Service.Base

I've linked the library file, the code below is the required code to implement. You'll also need to create the "blank.php" file as it needs to be something the XHR can get a valid response from when online.

var netCheck = new NetworkDetection("blank.php");

netCheck.addEventListener("online", function(eAja){
                                        
                                        $("display").innerHTML = "online";
                                    });
netCheck.addEventListener("offline", function(eAja){
                                            
                                            $("display").innerHTML = "offline";
                                        
                                        });

			
					

Comments