Lately I’ve been thinking more about how to make my PhoneGap applications more robust. By robust, I’m not necessarily talking about performance. While that is important (see my coworker’s excellent blog post on the topic: Performance & UX Considerations For Successful PhoneGap Apps), I’m thinking more about the general stability of the application as a whole. This is especially important for applications that need, or desire, data only available on the network. How you handle network conditions is just as important as how you handle the UX and performance of your application. (Well, that may be up to debate. :) In this blog post I’m going to share some thoughts and examples of what I mean by this and - as always - I look forward to your comments, suggestions, and corrections.
Net-Using PhoneGap Apps
That being said, if you do need to use the Internet in your application, how can you handle network issues? PhoneGap provides two different ways to handle this.
First is the Connection API. This isn’t really an “API”, but simply a constant you can check in your code to determine the connection status. There are various results that allow you to not only check for any connection but the relative strength of the connection. This would be useful, for example, to determine what quality of a YouTube video you want to display - standard or HD.
Here are the possible values for this constant:
One of the constant values for the Connection object is UNKNOWN. How you handle that is really up to you. In general, I think it is safer to be pessimistic and assume UNKNOWN is the same as OFFLINE, but I go back and forth on that.
The second thing PhoneGap provides is an event system that can recognize network changes. You have both an offline and online event your code could listen to.
In general, I think it makes sense for an application to check network status on startup, and have event listeners for changes. You can't assume that a network connection that exists when the application starts up will be there for as long as the application is alive.
In order to test this, I build an application that supports Twitter searches. If you are online, then you can enter a search term, hit the button, and see the results from the Twitter API. If you are offline, the application responds correctly. The code I used also handles your device going on and offline. Here is a portion of the code.
For the most part, this should just "make sense", but definitely let me know if you have questions. (I've included the entire application as a zip attached to this blog entry. It really isn't much more than this, but if you want to see it, just download the bits.)
Here's an example of the application running in Ripple. Notice that I've done a search already.
I can now use Ripple to take my device offline. Notice that Ripple fakes an in-device notification with a simple HTML element overlaying the device.
It may be a bit hard to see, but the button has been disabled as well. This way the user can't accidentally click it again. When network access is restored, the button will be re-enabled.
What else?So I know I'm missing other suggestions. Leave a comment below!