DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Seven Steps To Deploy Kedro Pipelines on Amazon EMR
  • What Is Envoy Proxy?
  • Integrating AWS With Salesforce Using Terraform
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers

Trending

  • Seven Steps To Deploy Kedro Pipelines on Amazon EMR
  • What Is Envoy Proxy?
  • Integrating AWS With Salesforce Using Terraform
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers

PhoneGap Online/Offline Tip

Raymond Camden user avatar by
Raymond Camden
·
May. 29, 13 · Interview
Like (0)
Save
Tweet
Share
9.86K Views

Join the DZone community and get the full member experience.

Join For Free

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:

document.addEventListener("deviceready", init, false);
 
function init() {
  document.addEventListener("online", toggleCon, false);
	document.addEventListener("offline", toggleCon, false);
 
	if(navigator.network.connection.type == Connection.NONE) {
		navigator.notification.alert("Sorry, you are offline.", function() {}, "Offline!");
	} else {
		setupButtonHandler();
	}
 
}
 
function toggleCon(e) {
	console.log("Called",e.type);
	if(e.type == "offline") {
		$("#searchBtn").off("touchstart").attr("disabled","disabled");
		navigator.notification.alert("Sorry, you are offline.", function() {}, "Offline!");
	} else {
		$("#searchBtn").removeAttr("disabled");
		navigator.notification.alert("Woot, you are back online.", function() {}, "Online!");
		setupButtonHandler();
	}
}

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Cordova Online Example</title>
 
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
 
    // Call onDeviceReady when Cordova is loaded.
    //
    // At this point, the document has loaded but cordova-x.x.x.js has not.
    // When Cordova is loaded and talking with the native device,
    // it will call the event `deviceready`.
    //
    function onLoad() {
        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);
        document.addEventListener("deviceready", onDeviceReady, false);
    }
 
    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        console.log("onDeviceReady");
    }
 
    // Handle the online event
    //
    function onOnline() {
        console.log("onOnline");
    }
 
    function onOffline() {
        console.log("onOffline");
    }
        
    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

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 onload event with logic and a ondeviceready. My way just "feels" better to me, but I reserve the right to change my mind in the next five minutes. ;)

Event

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Seven Steps To Deploy Kedro Pipelines on Amazon EMR
  • What Is Envoy Proxy?
  • Integrating AWS With Salesforce Using Terraform
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: