携帯電波がない場合は、MonacaのpushPage、popPage、<ons-back-button>などを実行させない方法

Question

Monacaでサーバーとの通信を前提としたアプリを作っています。

ページ遷移時にAjaxでデータをサーバーから受信して各種処理をさせています。

そのため、携帯電波がない場合だと、アプリ動作に支障がでるため、
「携帯圏外の場合は、pushPage、popPage、<ons-back-button>を実行させたくない」のですが、
これをシンプルに実装するには、どのような方法があるでしょうか？

https://lifehackdev.xsrv.jp/ZakkiBlog/articles/detail/hybrid_app5　を参考に、電波状態を検知する方法はわかるのですが、pushPage、popPage、<ons-back-button>の全てにonlineFlagを見た条件分岐を記載する方法しか思い浮かびません。

スマートな方法としてどのような記述があるか、アドバイスいただけないでしょうか？

●上記URLで紹介されている電波の確認方法
// オンラインの判定（オンライン）
document.addEventListener("online", onOnline, false);
function onOnline() {
onlineFlag = true;
}
// オフラインの判定（オフライン）
document.addEventListener("offline", onOffline, false);
function onOffline() {
onlineFlag = false;
}

Answer 1

onlineFlagの真偽で表示するタグを使い分けたら如何でしょう？
不通のときは、

<ons-button modifier="quiet" disabled="true">

を表示しておいて、

angularjs を使っているのでしたら、

ng-show="onlineFlag"

JQueryでしたら、

if(onlineFlag){
 $("#id").show();
}

みたいな。

Comments

[wallaby_66]

なるほど、disabledを切り替えるのは、有りですね。
今回はネットワーク未接続になったら、画面全体にエラーを出して、ボタンやリンクなどが事実上使えない状態にすることで対応しようと思います

Answer 2

Wifiでつないでるときはどうするの？とか、BLその他のネットワークで、とか

どーする？

Comments

[wallaby_66]

当方、ご指摘の意味を理解できておらず、見当違いな回答をしている気がしますが。。。
携帯キャリアの電波、Wi-Fi、有線LANなど、種類は問わず、「通信ができない状態」のときにpushPage、popPageなどのメソドや、ons-back-buttonなどのコンポーネントが呼び出された際、ページ遷移を行わず、且つ、「ネットワークに接続されていません」といった趣旨のエラーを出したいと考えています。

pushPageで次ページが呼び出された時に、サーバーからデータを取得するプログラムを走らせているのですが、そのプログラムの最初に「ネットワークの接続の判定してエラー処理」という方法でも一応の目的は果たせるのですが、これだと画面遷移してから処理しているので、ユーザにとって煩わしいですし、なにより「ページ遷移後に実行される各プログラム」に全て同じ処理を書いてしまうという・・・。恥ずかしながら趣味の日曜プログラマーでは、これぐらいしかアイデアがなく、質問を掲載させていただいた次第です。

[y_waiwai]

とにかくネットワークに繋がっていなければ、という質問であれば、あらかじめネットワークに繋がってるかどうかをチェックすればいいだけですが、そういう質問でしょうか。
それならいくらでもチェック方法はあると思いますけど、それでいいんでしょうか

[wallaby_66]

ご回答有り難うございます。
各処理にネットワーク接続状態をチェックするプログラムを書いておけばいいのですが、毎回同じ処理を書くのも冗長だなぁと考えた次第です。
y_waiwai様にレスを書いているときに、「ネットワークがつながっていないときは、画面全体にモーダルをかけて、エラーメッセージを出す（ボタン等を押せない状態にする）」ことで冗長な記載もせずに済むと思いつきました。ネットワークに繋がっていないと利用でいないサービスなので、これで行こうと思います。
ご協力いただきありがとうございました。