ionic ネットワーク接続を確認する 【Capacitor】

はじめに

追加情報として、Ionic アプリ起動時にオフラインなら警告を出す（Capacitor）もあります。

環境

Capacitor + ionic4

概要

アプリで可能な限り欲しい機能の１つであるインターネット接続の検出。
オフラインになると「ネット接続を確認してね〜」って出るアレ。

公式はこちら

capacitorのNetwork APIを入れる

home.page.tsを使ってやっていく。

以下を追加。

home.page.ts

import { Plugins, NetworkStatus } from '@capacitor/core';
const { Network } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  status: NetworkStatus;
  constructor() { }

  ionViewDidEnter() {
    this.getStatus();
  }
  async getStatus() {
    try {
      this.status = await Network.getStatus();
    } catch (error) { 
      console.log('エラー ', error);
    }
  }
}

htmlで確認できるようにする。

home.page.html

<ion-content>
  <div class="ion-padding">
    <p> Network Status: {{status | json}} </p>
  </div>
</ion-content>

オンライン状態ならconnected:true、オフライン状態ならconnected:falseと表示される。

オフラインならアラートを出す

接続状態の検出はできた。

次はよくあるアレを実装する。

home.page.ts

import { AlertController } from '@ionic/angular';
import { Plugins, NetworkStatus } from '@capacitor/core';
const { Network } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  status: NetworkStatus;
  constructor(private alertCtrl: AlertController) { }

  ionViewDidEnter() {
    this.getStatus();
    this.startListenNetwork();
  }

  ionViewWillLeave() {
    this.stopListenNetwork();
  }

  async getStatus() {
    try {
      this.status = await Network.getStatus();
    } catch (error) {
      console.log('エラー ' + error);
    }
  }

  startListenNetwork() {
    this.listener = Network.addListener('networkStatusChange', (status) => {
      if (!status.connected) {
        this.networkAlert();
      }
    });
  }

  stopListenNetwork() {
    if (this.listener) {
      this.listener.remove();
    }
  }

  async networkAlert() {
    const alert = await this.alertCtrl.create({
      header: '接続エラー',
      message: 'インターネット接続がオフラインです。。インターネット接続を確認して下さい！',
      buttons: ['OK']
    });
    await alert.present();
  }
}

Wi-Fiをオフにして確認する。

こんな感じで表示されれば成功！！

ちなみに、Androidの場合は権限の設定が必要なんだとか。

※私の場合はデフォルト？で設定されてました。

AndroidManifest.xmlに以下を追加

AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

これによって、アプリが現在のネットワークに関する情報にアクセス可能となる。

AndroidManifest.xmlはAndroid Studioを開いて以下の場所で確認できる。

Serviceを使って実行させる

アプリのページ数が少ないなら、さっきの感じでxxx.page.tsに書いてもいい。
でもページ数が多くなると、すべてのページに書くのは面倒だ。

よってServiceにまとめる。

home.service.ts

import { AlertController } from '@ionic/angular';
const { Network } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  status: NetworkStatus;
  listener: any;

 constructor(
    private alertCtrl: AlertController
  ) { }

 // ネット接続の状態を取得
  async getStatus() {
    try {
      this.status = await Network.getStatus();
    } catch (error) {
      console.log('エラー ' + error);
    }
  }

  // ネット接続の確認を開始
  startListenNetwork() {
    this.listener = Network.addListener('networkStatusChange', (status) => {
      if (!status.connected) {
        this.networkAlert();
      }
    });
  }

  // ネット接続の確認を終了
  stopListenNetwork() {
    if (this.listener) {
      this.listener.remove();
    }
  }

  async networkAlert() {
    const alert = await this.alertCtrl.create({
      header: '接続エラー',
      message: 'インターネット接続がオフラインです。。インターネット接続を確認して下さい！',
      buttons: ['OK']
    });
    await alert.present();
  }
}

serviceから注入して使う。

home.page.ts

constructor(
    private homeService: HomeService,
  ) 

ionViewDidEnter() {
    this.homeService.getStatus();
    this.homeService.startListenNetwork();
  }

  ionViewWillLeave() {
    this.homeService.stopListenNetwork();
  }

これでhomeServiceをimportするだけで、すべてのページで使える。