Getting Broadcast after screen loading from Network Information plugin Ionic

ionic-v1
1

Hi I had a lot of testing rounds on this but not able to get exact solution so posting for help.

I am having my app in Ionic not Ionic2

Using plugin for network is “Network Information” cordova-plugin-network-information 1.3.0 “Network Information” Link

Scenario:

When user minimizes app and goes to background and turn off the network source like WiFi, Mobile Data and comes back to app home page the plugin. methods returns true for network in first place and after some time getting Broadcast saying now network is offline

Expected behaviour:

Should receive Broadcast on turning network source like WiFi, Mobile Data On or Off, so I can handle in app.

My source code for Broadcast who responded to network events in $ionicPlatform.ready in app.js is mentioned below:

//listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function (event, networkState) 
        {
            console.log("BR got inside online -- App " + networkState);
            $rootScope.isonlineState = true;
            console.log("BR got inside online getNetwork-- App " + $cordovaNetwork.getNetwork());
            console.log("BR got inside online isOnline-- App " + $cordovaNetwork.isOnline());
        })

// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function (event, networkState) 
 {
    console.log("BR got inside offline  -- App " + networkState);
        $rootScope.isonlineState = false;
    console.log("BR got inside offline getNetwork-- App " + $cordovaNetwork.getNetwork());
    console.log("BR got inside offline isOnline-- App " + $cordovaNetwork.isOnline());
    })

I debugged this scenario so many times but still not able to get right behaviour only on iPhone.

Please share your experiences on this so would help me to solve the issue. Thanks in advance.

2

define two separate JavaScript functions
function onOffline()
{

}

and

function onOnline(){

}

Apply these functions to Online and Ofline Events in device ready like

document.addEventListener(“offline”, onOffline, false);
document.addEventListener(“online”, onOnline, false);

Now you can set any global parameter and check it in your root scope if your device is online or ofline

3

Thanks @baviskarmitesh
I tried this as well but still it goes to offline event on same time it goes in above broadcast receiver part. So nothing has changed.

below is the app.js platformready part inside I’ve declared these eventListeners:

           function onOnline()
            {
                    console.log("inside event onOnline -- App " );
            }
            
            function onOffline()
            {
                    console.log("inside event onOffline -- App " );
            }
            
            try 
            {
                $rootScope.isonlineState = $cordovaNetwork.isOnline();
                document.addEventListener("online", onOnline, false);
                document.addEventListener("offline", onOffline, false);
            } catch (error) {
                $rootScope.isonlineState = false;
            }

After turning off WiFi
Firs when I resume my application I got this on console (I’ve logged this):
[Log] I’m inforeground… (console-via-logger.js, line 173)
[Log] Resume getNetwork – “wifi Conn Type: wifi” (console-via-logger.js, line 173)
[Log] I’m inforeground.cState.home isOnline: true (console-via-logger.js, line 173)
[Log] is Network true

after couple of Home api calls I got this on console (I’ve logged this):
[Log] inside event onOffline – App (console-via-logger.js, line 173)
[Log] BR got inside offline – App none (console-via-logger.js, line 173)
[Log] BR got inside offline method call getNetwork-- App none (console-via-logger.js, line 173)
[Log] BR got inside offline method call isOnline-- App false (console-via-logger.js, line 173)
[Log] BR got offline-- Home none (console-via-logger.js, line 173)

I want my application to detect when user is offline and online on event so some offline part of app will work seamlessly.

4

It takes split of seconds o get the network state hence it is going for ofline mode first and then goes to online mode. So try to delay your application for half second and try it might work

5

I’ve waited for almost 2 mints but when I resume my application it shows the same log I posted above.
This is happening only in iPhone on Android application works fine.

Do you know the best practices to write this connectionMnager in ionic, I did this before in Android but no clue how to achieve this in Ionic

6

Finally after couple of days of struggle I figured out that there is no way in this plugin to notify you other than it’s BrodcastReceivers, thats fine but When in off network your app comes from background to Foreground and you call APIs then you see your app’s page is trying to call APIs(because plugin methods returning isOnline to true) but they should not as there is no network and after few seconds you receive Broadcast saying You are offline now.

Solution
So the best way is to call the update to your pages from Background to Foreground is from BroadcastReceiver… call another your Local BrodacstReceiver to update the page based on network events.

Hope this helps to other facing same issue and needs solutions on that… :slight_smile: