Telling your user that a PhoneGap application is busy
Plenty of times in applications, especially on mobile devices, you just need to tell your users to hold their horses and wait while your application processes something in the background. Maybe you need to query some data from a remote server, save a file to disk, or maybe you just need to do some number crunching. Whatever the reason, you don’t want your user to think the program has crashed if you don’t give them some sort of visual feedback that you’re busy and they just have to wait a few seconds.
PhoneGap provides a few methods to handle just this task. There’s four methods within the Notification class that are of interest.
navigator.notification.loadingStart()navigator.notification.loadingStop()navigator.notification.activityStart()navigator.notification.activityStop()
Modal loading messages
Modal loading indicator
The easiest approach to take when making your users wait is to show a modal loading dialog, one that doesn’t let the user interact with the application until you’re done. There’s a lot less for you, as a developer, to manage when the user isn’t allowed to poke around on buttons when you’re updating the display. Asynchronous operations are a lot simpler when you’re in control.
The loadingStart() and loadingStop() methods do just this. They put up a modal semi-transparent layer over top of your application, with a “Loading..” spinner message. You simply call the first method when your application is about to do something, and when it finishes you call the second.
Here’s an example of how to use it. This will load a remote HTML document and place its contents into a node in your PhoneGap application.
Not only does this make it easier to integrate external content into your PhoneGap application, but it guarantees your user is informed that it’s actively working. As a final bonus, if your external web site doesn’t respond, or if the user doesn’t have an Internet connection, the modal loading screen will close after a timeout.
Asynchronous loading messages
Sometimes you want to tell your user that the application is busy, but you still want to continue using the app anyway. If your app doesn’t turn off the top statusbar (where the time, reception, and battery status is displayed), you can control the busy indicator from within PhoneGap. Just like the above example, you just have to call the appropriate PhoneGap JavaScript methods. In this case, just update the above example with these messages:
navigator.notification.activityStart();
// Do something that might take a while...
navigator.notification.activityStop();