networkStatusChange event fires after on app resume

[selcuk-sahin]

Bug Report

Plugin(s)

@capacitor/network

Capacitor Version

Latest Dependencies:

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

Installed Dependencies:

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

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

Platform(s)

Android

Current Behavior

When the app resumes, the network state change Detector is activated. It also happens when using plugins that change app contexts, such as Facebook Login

Expected Behavior

This event should not be fired when app is resumed.

Code Reproduction

 Network.addListener('networkStatusChange', async (status) => {
      if (status.connected) {
        alert('Reconnected')
      } else if(!status.connected) {
        alert('Low connection')
      }
    });

Other Technical Details

Xiaomi Redmi 5 Plus Android v8.1.0

Additional Context

[iamrsojitra]

I am facing the same issue. Did you find any solution for this?

[shprink]

Same here with @capacitor/network@4.1.0

[iamrsojitra]

@shprink I found like why this is happening. It was happening because of power saving mode was on.

[shprink]

ok thanks but it is not the case with me.

[webmasterab]

When checking the connection I get a message 3x. As also indicated above.

@capacitor/network@4.1.0

If there is no connection or network, you will not receive feedback in the form of false and none. on Android12 Emulator Android Studio

[selcuk-sahin]

I'm using

@ionic/angular": "^6.4.1" @capacitor/network": "^4.1.0"

& here is a working solution for me:

...
import { ConnectionStatus, Network } from "@capacitor/network";
import { Platform } from "@ionic/angular";
import { PluginListenerHandle } from "@capacitor/core";
import { takeUntil } from "rxjs/operators";

@Injectable({
  providedIn: "root",
})
export class NetworkService implements OnDestroy {
  private ngUnsubscribe = new Subject();
  latestStatus: ConnectionStatus;
  networkListener: PluginListenerHandle;

  constructor(private platform: Platform, private commons: CommonsService) {}

  ngOnDestroy(): void {
    if (this.platform.is("capacitor")) {
      Network.removeAllListeners();
    }
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  async init(): Promise<void> {
    await this.platform.ready();
    this.addNetworkListener();
    this.latestStatus = await Network.getStatus();

    this.platform.resume.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
      this.addNetworkListener();
    });

    this.platform.pause.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
      this.networkListener.remove();
    });
  }

  private async addNetworkListener() {
    this.networkListener = await Network.addListener("networkStatusChange", (status) => {
      /**
       * Detect if status change correct, i.e. dont trigger warning for same event twice
       */
      if (this.latestStatus.connected !== status.connected) {
        this.latestStatus = status;
        if (status.connected) {
          this.handleConnect();
        } else {
          this.handleDisconnect();
        }
      }
    });
  }
  ...
  }

[webmasterab]

I have deleted my previous answer.

Because it works anyway.

Thanks for this

[webmasterab]

Tested again today.

The network check works fine on Android 11 and below but not on Android 12 and above.

If you lose the connection in Android 12, the inspect indicates that the listener will be removed. When the connection is restored, the listener is activated again.

Very strange.

So it doesn't work well

-- When I test it with Android 11 in the emulator (latest version in Android Studio) both actions say that the event list is added.

With Android 12 in emulator in Android Studio, it says no network that the listener is being removed. That's where it goes wrong.

I've looked at network.java but can't figure it out.

[webmasterab]

Got it working by disabling the below

And adding this above this code

The code now looks like this for the part `` private async addNetworkListener() { this.networkListener = await Network.addListener("networkStatusChange", (status) => { /**

• Detect if status change correctly, i.e. dont trigger warning for same event twice */ this.settings.noInternet = status.connected; this.settings.networkType = status.connectionType;

  // if (this.latestStatus.connected !== status.connected) { // this.latestStatus = status; // if (status.connected) { // this.settings.startApp(); // this.settings.noInternet = this.latestStatus.connected; // this.settings.networkType = this.latestStatus.connectionType; // } else { // this.settings.noInternet = this.latestStatus.connected; // this.settings.networkType = this.latestStatus.connectionType; // } // } }); } ``

[danis039]

It's 2024 now... 🙂 Any fix for this in the horizon?

[marshall86]

any feedback about this bug? I'm using Angular 17, Capacitor 5 and Ionic 8. Every time the App resume, the networkStatusChange triggers in a loop