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. ;)
Archived Comments
Nice!
I use code almost identical to the second block in our app.
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. :-)
http://www.icenium.com/blog... is a three part series that explores some of the tools available to detect and manage online/offline connectivity.
2013/04/23/is-this-thing-on-(part-1)
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
Ah yes, sorry. The first code block is from a demo from an earlier version.
Its not working in ios 7 having phonegap 3.3.0
How is it not working exactly?
Its working now dont know why it was not working earlier. Thanks for the code :)
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?
Yes. See https://github.com/apache/c...
WOW, good info! Will be utilizing these techniques in my next app.
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
PG apps are web apps packaged up. So can you save "strings"? Sure - you can have hard coded HTML pages, JavaScript values, etc.
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.
@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?
Ok nevermind, it is my server-side code blocking you, not the field. Sorry!
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.
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.
it's not working once i close the app!!
is there any way to make it working once the connection start ?
I'm confused. You want the app to work with the app is closed. That doesn't make sense.
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
There is a plugin for background tasks. I haven't used it myself yet, but I'd start there.