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();
}
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();
}
}
constructor(
private homeService: HomeService,
)
ionViewDidEnter() {
this.homeService.getStatus();
this.homeService.startListenNetwork();
}
ionViewWillLeave() {
this.homeService.stopListenNetwork();
}
どこが変わったかというとgetStatus()
のところ。
これで、もしアプリ起動時にオフラインならアラートがでる。
Author And Source
この問題について(Ionic アプリ起動時にオフラインなら警告を出す(Capacitor)), 我々は、より多くの情報をここで見つけました https://qiita.com/kokogento/items/2699e4c2a6f4f0f2aca0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .