bug: capacitor network plugin doesn't fire an event after going back online on iOS simulator

[dmitry-stepanenko]

Bug Report

Capacitor Version

npx cap doctor output:

Latest Dependencies:

  @capacitor/cli: 1.3.0

  @capacitor/core: 1.3.0

  @capacitor/android: 1.3.0

  @capacitor/ios: 1.3.0

Installed Dependencies:

  @capacitor/android not installed

  @capacitor/cli 1.3.0

  @capacitor/core 1.3.0

  @capacitor/ios 1.3.0

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

The plugin doesn't detect the network state changes (see steps to reproduce)

Expected Behavior

The plugin should detect the network state changes correctly

Reproduction Steps

1. Create an empty ionic application with capacitor
2. Update initializeApp function in app.component.ts as follows

import {Plugins} from '@capacitor/core';

initializeApp() {
    this.platform.ready().then(() => {
      Plugins.Network.addListener('networkStatusChange', (status) => console.log('network', status));
      setInterval(() => Plugins.Network.getStatus().then((status) => console.log('status interval', status)), 10000);
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

3. build the app for ios and open an emulator
4. notice console logs of valid network state
5. turn off network on the laptop
6. notice the plugin correctly detecting network status change
7. turn the network on
8. notice there's no changes, it still thinks app is offline

[jcesarmobile]

I can reproduce on the simulator, but not on real devices, setting as low priority

[hanifnouhi]

Today, I face this problem on android (real device).
I have to mention that this is not the only issue with this plugin. After I turn off the wifi on real device the network plugin can't always show the correct network connection type. for example after turning the wifi off, my device connect to mobile data but the network type is shown as 'wifi'.

[jansgescheit]

On my case is iOS broken. The native CAPLog prints all network state changes correct!
But the events are not broadcasting to the web layer. if i run Plugins.Network.getStatus() for testing, the result is always wifi. It looks like that the bridge is on the Network interface broken.

Latest Dependencies:

  @capacitor/cli: 1.5.0
  @capacitor/core: 1.5.0
  @capacitor/android: 1.5.0
  @capacitor/ios: 1.5.0

Installed Dependencies:

  @capacitor/cli 1.5.0
  @capacitor/ios 1.5.0
  @capacitor/android 1.5.0
  @capacitor/core 1.5.0

    async ngOnInit() {

        this.platform.ready().then(async () => {
            // networkStatusChange is never fired
            Network.addListener('networkStatusChange', s => console.log('networkStatusChange', s));
           
             // always returns wifi
            const status = await Network.getStatus();
            console.log('networkStatus', status); 
       });
}

[kevinclarkadstech]

Ah, same issues here. The status change does not fire on iOS device. Get status seems to work when the app loads.

I'm trying to dynamically load lower or higher quality photos based on the network status. It would also be nice to see if network status is 3G or 4G, so 3G would load low quality and 4G would load standard quality. Is that functionality going to be available at some point? Thanks for all your hard work guys!

[dmitry-stepanenko]

@kevinclarkadstech you can use ionic-native plugin for network instead, it has similar issue on IOS, but you can trigger the updates by toggling your app with any other.

[thoechtl]

If using Angular you have to run it in NgZone to see immediate network changes in your app.

Here is a working example:

import { BehaviorSubject, Observable } from 'rxjs';
import { NgZone } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { Network } = Plugins;

export class NetworkService {
  isOnline$: Observable<boolean>;
  private statusSubject = new BehaviorSubject<boolean>(false);

  constructor(
     private zone: NgZone,
  ) {
    Network.getStatus().then(status => this.statusSubject.next(status.connected));
    this.isOnline$ = this.statusSubject.asObservable();

    Network.addListener('networkStatusChange', (status) => {
      this.zone.run(() => {
        this.statusSubject.next(status.connected);
      });
    });
  }

Then simply subscribe to isOnline$ and everthing should work as expected.

[hanifnouhi]

Thanks for your reply. Unfortunately I decided to return to Cordova, because I couldn't run capacitor on iOS. Even Though I like Capacitor more than Cordova but I think we still can't rely on Capacitor completely.

…

On Wed, Aug 26, 2020 at 11:50 AM thoechtl ***@***.***> wrote: If using Angular you have to run it in NgZone to see immediate network changes in your app. Here is a working example: import { BehaviorSubject, Observable } from 'rxjs'; import { NgZone } from ***@***.***/core'; import { Plugins } from ***@***.***/core'; const { Network } = Plugins; export class NetworkService { isOnline$: Observable<boolean>; private statusSubject = new BehaviorSubject<boolean>(false); constructor( private zone: NgZone, ) { Network.getStatus().then(status => this.statusSubject.next(status.connected)); this.isOnline$ = this.statusSubject.asObservable(); Network.addListener('networkStatusChange', (status) => { this.zone.run(() => { this.statusSubject.next(status.connected); }); }); } Then simply subscribe to isOnline$ and everthing should work as expected. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/ionic-team/capacitor/issues/2216#issuecomment-680706354>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADGW534X7DG37SHTNKILDL3SCSZS5ANCNFSM4JSW27XQ> .

-- Hanif Nouhi

[jcesarmobile]

moving the plugin to capacitor-plugins repo since network plugin has been moved here

please, for people having problems with the Android implementation, report a new issue, this one is about iOS.

I can still reproduce with the new implementation, but looks like a bug on the simulator more than a bug in the code

[miguelcarrascoq]

NetworkService

that work for me (src/app/shared/services/network.service.ts):

import { Injectable } from '@angular/core';
import { NgZone } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { Network } = Plugins;

@Injectable({
  providedIn: 'root',
})
export class NetworkService {
  isOnline: boolean;

  constructor(private zone: NgZone) {
    Network.getStatus().then((status) => {
      console.log('isOnline', status.connected);
      this.isOnline = status.connected;
    });

    Network.addListener('networkStatusChange', (status) => {
      this.zone.run(() => {
        console.log('isOnline', status.connected);
        this.isOnline = status.connected;
      });
    });
  }
}

[tigohenryschultz]

I have issues with this on a regular iOS phone. Is this ever going to be looked into, or is Ionic giving up?

[micheal-w-wells]

The output of (await Network.getStatus()).connected) is often out of sync with the simulator in turning wifi on and off. The events also are unreliable on ios.

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.2.0
  @capacitor/core: 3.2.0
  @capacitor/android: 3.2.0
  @capacitor/ios: 3.2.0

Installed Dependencies:

  @capacitor/cli: 3.1.2
  @capacitor/core: 3.1.2
  @capacitor/android: 3.1.2
  @capacitor/ios: 3.1.2

[success] iOS looking great! 👌
[success] Android looking great! 👌```

[drtomato]

I have tested the Network plugin with an app on a real iOS device by walking out of and then into WiFi coverage (no SIM in the device so only connectivity via WiFi). The app was either in activated, deactivated or closed state when walking out of and then into coverage, which resulted in a test matrix with nine test cases. When back in coverage I activated the app and checked the status. Seven of the test cases worked but two did not:

1. a) App in active and connected state. b) Closed the app (i.e., shut it down completely) c) Walked out of WiFi coverage d) Activated the app: the disconnected state was properly detected e) Entered WiFi coverage. Expected result: a network change event ['wifi', connected: true]. Actual result: no event fired.

2. a) App in active and connected state. b) Closed the app (i.e., shut it down completely) c) Walked out of WiFi coverage d) Activated the app: the disconnected state was properly detected d) Deactivated the app (i.e. backgrounded it) e) Entered WiFi coverage. f) Activated the app. Expected result: a network change event and/or status ['wifi', connected: true]. Actual result: no event fired, status ['none', connected: false]

So this is still a problem. Unfortunately, I have no code to share but I hope this description helps to narrow down where the problem might be. These failing test cases were the only ones where the app was activated from closed state while the network was disconnected. The disconnected state was picked up by the application but no events seem to have been fired after that. Could there be a bug where the internal event handling is not properly set up when the app is started while the network is disconnected?

EDIT:

I tried this again, now with the listener running inside NgZone as shown above and now the events are received as they should! I have always regarded NgZone as an important part of Angular's change detection and I don't understand why running a listener to a Capacitor plugin inside NgZone is necessary to make it work. If someone can explain this I would appreciate it :)

[mohammad2002-1381]

i just added

"plugins": {
    "CapacitorHttp": {
      "enabled": true
    }
  }

into capacitor.config.json file and internet connection issue was solved