Ionic アプリ起動時にオフラインなら警告を出す（Capacitor）

はじめに

この記事を確認して欲しい
ionic ネットワーク接続を確認する 【Capacitor】

上記の記事は私が前に書いたものだ。
最近発見したのだが、この記事で紹介してあるコードには1つ大きな欠落があった。。

タイトル通りだが、アプリの起動時にオフラインなら警告アラートが出ないのだ！！！

今回はその欠落を埋める。

なぜアプリの起動時にオフラインなら警告アラートがでない？

「はじめに」で紹介した記事より、コードを引用

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

これはネットワークの状態が変化した場合の処理なのだ。

通信がonからoffになった時、もしくはoffからonになった時。
そして、もし通信がonからoffになった時は、アラートを出す。

こんな感じである。

つまり、アプリ起動時に通信がoffだろうとstartListenNetwork()は、何も実行されない！

結論、こうすれば良い

home.service.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) { }


  // ネット接続の状態を取得
  async getStatus() {
    try {
      this.status = await Network.getStatus();
      if (this.status.connected === false) {
        this.networkAlert();
      }
    } 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();
  }
}

home.page.ts

constructor(
    private homeService: HomeService,
  ) 

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

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

どこが変わったかというとgetStatus()のところ。

これで、もしアプリ起動時にオフラインならアラートがでる。