Ionic network detection with Capacitor

Capacitor Definition from the official site “The Native Bridge for Cross-Platform Web Apps”. The Ionic Capacitor Network API provides events for monitoring network status changes in the PWA application. The Ionic network detection with capacitor has network API which allows us to query the current status of the network.

It is a common requirement to detect internet connection status in an Ionic PWA application. We might want to show a message like “you are offline”, we might want to load cached data or we would use it to take to the “offline” page. Also as soon as an internet connection is restored, we would like to make the application functional without any user interaction.

Step 1: Create a project and add a Capacitor to our project.

Let’s create an Ionic angular project and install a capacitor to demonstrate an example of an ionic network capacitor. If a capacitor is not installed while creating a project and then we have to install the capacitor package in our project.

ionic start networkApp blank --type=angular
cd  networkApp
npm run build
npm install @capacitor/network
npx cap sync

Step 2: Implementing Ionic network detection with Capacitor network activities.

We need to import the network plugin from @capacitor/core. Edit home.page.ts component to include network activities like the network listener, get network status, and end network listener on our page or component.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { PluginListenerHandle } from '@capacitor/core';
import { Network } from '@capacitor/network';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {
  networkStatus: any;
  networkListener: PluginListenerHandle;

  constructor() { }

  ngOnInit() {
    this.networkListener = Network.addListener('networkStatusChange', (status) => {
      this.networkStatus = status;
      console.log('Network status changed', status);
    });
  }

  async getNetWorkStatus() {
    this.networkStatus = await Network.getStatus();
    console.log(this.networkStatus);
  }

  endNetworkListener() {
    if (this.networkListener) {
      this.networkListener.remove();
    }
  }

  ngOnDestroy() {
    if (this.networkListener) {
      this.networkListener.remove();
    }
  }
}

Step 3: Displaying the current network status on the home template

We can use network service to add all network methods activities so that we can share it with other components in our application. In this example, we are using network activities in single components.

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic 6 Capacitor Network</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card>
    <ion-card-header>
      <h2>
        Network connection:
        <ion-icon size="large" name="wifi" color="primary"></ion-icon><br/>
        {{ networkStatus | json }}
      </h2>
    </ion-card-header>
    <ion-card-content class="ion-float-right">
      <ion-button size="small" (click)="getNetWorkStatus()">
       Get network status
      </ion-button>
      <ion-button size="small" color="danger" (click)="endNetworkListener()">
          End network listener
      </ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

You can read up more on the ionic network capacitor in the official capacitor docs.

Related posts

• How to set up a capacitor in Ionic project.
• Ionic Capacitor camera example
• Ionic capacitor storage