Recent Weblogs

Links I like

 

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.

NetworkDetection
Methods
voidinitialize(url, options)
voidstartTimer() -- This method kicks off the timer such that it will begin its polling
voidstopTimer() -- This method clears the timer, stops the class's polling
String getStatus -- gets the current status of the network connection. online or offline
Events
  online -- this event is fired when the instance regains network connection
  offline -- this event is fired when the instance loses network connection.
  request -- Inherited from Ajax.Service.Base
  response -- Inherited from Ajax.Service.Base

The Code

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

November 06, 2007Gabriele

Very nice work!?! Just what I was looking for...
Is it possible to append the network detection to every ajax request or update (with prototype)?
thanks Gabriele

January 19, 2008MaFer

Hi.. we were trying with your code, but it doesnt't work for us. We include the prototype.js and the NetworkDetection.js, but we obtain the following error message: NetworkDetection is not a constructor and NetworkDetection class isn't recognize.. can you help us?

February 03, 2008dfalck

Matthew, thanks again for the example code. I really think your solution is very elegant and I spoke with Dion about it (see link). In fact, it sparked a lot of discussions in the Gears group. Great work.

March 27, 2008Balaji

Hi,
can you please provide all files of this sample application.

June 28, 2008saparvaiz

i want to know the online status

September 18, 2008Bilgisayarın Kalbi

Thanks

September 27, 2008Games

Thanks

October 04, 2008dvd movies

its a real good

October 24, 2008lida

thank you

October 25, 2008download movies

Henry Poole abandons his fiancée and family business to spend what he believes are his remaining days alone. The discovery of a “miracle” by a nosy neighbor ruptures his solitude and restores his faith in life.

November 04, 2008Bodenmais

thnaks for this infomation over Google Gears.
Greets Bodenmais

December 13, 2008Holz Blog

Nice Article about Google Gears.
Best Regards Holz Blog

December 22, 2008Gazeteler

Good post thanks for sharing.

December 30, 20083 boyutlu oyunlar

sağol gözüm

January 13, 2009Plinian Webhotel Hosting

Google Gears is an open source browser extension that lets developers create web applications that can run offline. Gears provides three key features:
* A local server, to cache and serve application resources (HTML, JavaScript, images, etc.) without needing to contact a server
* A database, to store and access data from within the browser
* A worker thread pool, to make web applications more responsive by performing expensive operations in the background

January 21, 2009netlog

thanksss

January 21, 2009almanya chat

thnksss

January 25, 2009Oyun

thanks a lot

January 29, 2009Neil

Gears, formerly Google Gears, is software offered by Google that "enables more powerful web applications, by adding new features to your web browser." Released under the BSD license, Gears is free and open source software.

February 01, 2009Goji business

There are a number of web applications that use Gears. These applications come from a variety of companies, including Google (Gmail, YouTube, Docs, Reader, Picasa for mobile), MySpace (Mail Search), Zoho (Writer, Mail), Remember The Milk, and Buxfer. WordPress 2.6 added support for Gears, to speed up the administrative interface and reduce server hits.

June 04, 2009Gochi Juice

Great coding. I think this going to make google life easier. Keep up the good work.

July 05, 2009Henry

I have been learning so much to detect my network. This article help me a lot, and I think I will need less and less time now, thank you

October 11, 2009cloutstore.com

Read Reviews and Find Best Technology Gadgets From amazon http://www.cloutstore.com

June 27, 2011Matt

Why so spammy?

August 14, 2011Camden Chronicle

I would like to thank you for the efforts you have made in writing this post. <a href="http://www.city32.com/87/posts/2_Media/2_Newspapers/75_Camden_Chronicle.html">Camden Chronicle</a>

June 05, 2012home loans

Set your life time easier take the home loans goodfinance-blog.com and everything you need.

June 15, 2012research papers for sale

Not every single thing should be associated with this good post, thus, students still should buy term papers and buy essays.

June 15, 2012link packages

Well optimized web traffic, good rates, sales increasing, link discount package and backlinks issues…We have a secret online marketing methods. The best internet marketers the world over turn to our services just because they rely on our specialists!

Name
Site
Comment
  CAPTCHA Image
Reload Captcha Image
Captcha