PhoneGap Online/Offline Tip

This post is more than 2 years old.

A few months ago I wrote a blog post that talked about "robust" PhoneGap applications. Basically it was a look at the types of things you should consider to make your PhoneGap application more of an app and less of a wrapped web page.

One of the main topics of that blog post was about handling connection status. PhoneGap gives you access to the type of connection the device has as well as events that let you respond to online and offline states. These are important features that (most likely) every single PhoneGap app should be using.

I want to point out though a small issue with the code I shared. It isn't broke, but how I did things could be done slightly different. Consider this code block:

I want you to notice two things. I've got event listeners for my connection status. Then I have an immediate check. My thinking was, "I want to know when things change in the future but I also need to know what's going on right now."

However, it turns out that this isn't actually necessary. If you add event listeners for the online/offline events in the main body load event (not the PhoneGap device ready), then the appropriate event will be fired automatically.

If you read the docs for the events (http://docs.phonegap.com/en/2.7.0/cordova_events_events.md.html#online) closely you will see that they demonstrate using the body load event. What may not be clear from the docs though is that even though your connection may not change, the event really is fired for you. Here is an example that I've slightly modified from the docs.

Using this way of handling the events, I would not need a check in onDeviceReady. Thanks go to fellow Adobian Shazron for pointing this out.

So... do you have to use this way of handling it? To be honest, I prefer my way. It is a bit more coding, but I'd rather not have an onload event with logic and an ondeviceready. My way just "feels" better to me, but I reserve the right to change my mind in the next five minutes. ;)

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ryan posted on 5/24/2013 at 6:05 PM

Nice!

Comment 2 by John C. Bland II posted on 5/25/2013 at 12:49 AM

I use code almost identical to the second block in our app.

Comment 3 by Mario posted on 5/25/2013 at 12:57 AM

Thank you for mentioning this detail. It is really easy to miss the first event, if the listeners are added 'too late'. As within my app. :-)

Comment 4 by Phillip Senn posted on 5/25/2013 at 1:08 AM

http://www.icenium.com/blog... is a three part series that explores some of the tools available to detect and manage online/offline connectivity.

Comment 5 by Phillip Senn posted on 5/25/2013 at 1:10 AM

2013/04/23/is-this-thing-on-(part-1)

Comment 6 by Mario posted on 6/21/2013 at 1:43 PM

Hi

Just want to mention this detail:
It is 'navigator.connection.type' not 'navigator.network.connection.type'.

see docs:
http://docs.phonegap.com/en...

Cheers

Comment 7 by Raymond Camden posted on 6/21/2013 at 5:36 PM

Ah yes, sorry. The first code block is from a demo from an earlier version.

Comment 8 by Vipul posted on 1/21/2014 at 12:09 PM

Its not working in ios 7 having phonegap 3.3.0

Comment 9 by Raymond Camden posted on 1/21/2014 at 4:28 PM

How is it not working exactly?

Comment 10 by Vipul Solanki posted on 1/21/2014 at 4:31 PM

Its working now dont know why it was not working earlier. Thanks for the code :)

Comment 11 by Elmer posted on 4/10/2014 at 1:29 PM

Hello, I am new to cordova and developing mobile applications. My question is, is there a process where cordova check if the phone went offline and dynamically went online but the app is still running?

Comment 12 by Raymond Camden posted on 4/10/2014 at 3:21 PM
Comment 13 by Akita N. posted on 4/17/2014 at 2:34 AM

WOW, good info! Will be utilizing these techniques in my next app.

Comment 14 by MakerOfApps posted on 5/20/2014 at 5:43 PM

I am new to all of this but I have been developing iOS apps and now i want to go cross platform. Can i hardcode content say strings in a phone gap app that can be accessed by users without internet connection? Hope to hear from you soon. Thanks

Comment 15 by Raymond Camden posted on 5/20/2014 at 5:49 PM

PG apps are web apps packaged up. So can you save "strings"? Sure - you can have hard coded HTML pages, JavaScript values, etc.

Comment 16 by Another Other posted on 7/18/2014 at 7:13 PM

Raymond thanks very much for this article. It helped me solve my connection on/off issue.

I've read several of your articles and watched some of your videos and I have always come away feeling as though I have learned something.

Thanks again.

ps Just check if your form can handle the new TLDs. My domain is a '.directory' and your form would not accept it as a valid email address.

Comment 17 by Raymond Camden posted on 7/20/2014 at 2:09 AM

@AnotherOther: Interesting - all I'm using is type="email"/required in the HTML field. Can you tell me what browser you used to submit the comment?

Comment 18 by Raymond Camden posted on 7/20/2014 at 2:12 AM

Ok nevermind, it is my server-side code blocking you, not the field. Sorry!

Comment 19 by Piet Crombach posted on 11/10/2014 at 2:49 PM

This is not enough to make an app fully offline. Is it possible to make the HTML page offline with a manifest?

If I build a manifest this works great in a browser. But not on a mobile device. It seems there are some missing files.

Comment 20 by Raymond Camden posted on 11/10/2014 at 5:10 PM

I humbly disagree - kinda. This article is about a PhoneGap/Cordova app. It works offline because it runs on the device itself. Using a manifest file for offline support would apply to "normal" web pages, not PG/Cordoa apps as this blog entry is discussing.

Comment 21 by Mokh Akh posted on 11/21/2015 at 4:43 PM

it's not working once i close the app!!
is there any way to make it working once the connection start ?

Comment 22 (In reply to #21) by Raymond Camden posted on 11/21/2015 at 4:48 PM

I'm confused. You want the app to work with the app is closed. That doesn't make sense.

Comment 23 (In reply to #22) by Mokh Akh posted on 11/21/2015 at 4:53 PM

is there any way to make this code working in background task.
once i go online the app is working or some code is running, whatever my app is open or not

sorry i am new in mobile development, maybe this not possible but i try to find workaround

Comment 24 (In reply to #23) by Raymond Camden posted on 11/21/2015 at 5:24 PM

There is a plugin for background tasks. I haven't used it myself yet, but I'd start there.