端末のネットワーク状況を取得する
続いて、端末がネットワークを利用できるかを調べるためのプラグインを紹介します。このプラグインを使うと、現在、ネットワークが使えるかどうかを知ることと、その状況が変わったときにイベントとして取得することができます。Ajaxを利用したAPIを使う場合には、実際に実行してみた結果ネットワークが利用できなことは分かりますが、事前にネットワークが使えない場合には、そのためのエラー表示などをしてあげる方が親切です。
インストール
インストールするプラグインは、「cordova-plugin-network-information」です。インストールはリスト4のように行います。
$cordova plugin add cordova-plugin-network-information
プラグインの使い方
このプラグインは、connection.typeで取得できる現在のネットワーク利用状況と、状況の変更を通知うけるイベントで構成されています。ネットワークの利用状況はconnection.typeのプロパティ（文字列型）で取得可能です。ただし、その値は表2に示す定数が定義されていますので、プログラム内でチェックをする場合にはこの定数を使って下さい。
| 定数名 | 説明 |
|---|---|
| Connection.UNKNOWN | 不明の状態 |
| Connection.ETHERNET | 有線でつながれている状態。スマホの場合にはほぼない状態です |
| Connection.WIFI | Wi-Fiを使ってネットワークを利用している状態 |
| Connection.CELL_2G | 2Gを使ってネットワークを利用している状態 |
| Connection.CELL_3G | 3Gを使ってネットワークを利用している状態 |
| Connection.CELL_4G | 4Gを使ってネットワークを利用している状態 |
| Connection.CELL | これら以外のネットワークを利用している状態 |
| Connection.NONE | ネットワークが利用できない状態 |
リスト5はAngularJS内のコントローラ内でプラグインを使ったときの例です。
function NetworkController($scope){
// （1） ネットワークの状況の取得
$scope.type = navigator.connection.type;
// （2） オフライン時とオンライン時の切り分け
if(navigator.connection.type == Connection.NONE ||
navigator.connection.type == Connection.UNKNOWN){
$scope.offline = true;
}
else{
$scope.online = true;
}
// （3） オンライン時のイベント
this.onlineListener = function(){
console.log("online");
$scope.$apply(function(){
$scope.type = navigator.connection.type;
$scope.online = true;
$scope.offline = false;
});
};
// （4） オフライン時のイベント
this.offlineListener = function(){
console.log("offline");
$scope.$apply(function(){
$scope.type = navigator.connection.type;
$scope.offline = true;
$scope.online = false;
});
};
var that = this;
$scope.$on('$destroy',function(){
// （5） イベントの解除
document.removeEventListener('online',that.onlineListener);
document.removeEventListener('offline',that.offlineListener);
});
// （6） イベントの登録
document.addEventListener('online',this.onlineListener,false);
document.addEventListener('offline',this.offlineListener,false);
};
（1）のようにtypeプロパティで、ネットワークの状況が取得できます。また、その値を使ってオンライン、オフラインのように判断する場合には（2）のように行います。（3）、（4）は実際にネットワークが変わったときのコールバック関数で、（5）、（6）のようにイベントの登録と解除を行います。また、イベントは変わったときに発火され、アプリ起動時や、イベント登録前の状態を知るには、（1）や（2）のようにする必要があります。
AngularJSを知らない読者などは実際にどのような結果になるのか少々わかりにくいと思いますので、リスト6にHTMLと、そのときの実際のスマホ側に表示される結果を図1に示します。
<div>
<h2>ネットワーク情報</h2>
<div class="list-group">
<div class="list-group-item">
<h5>connection.type</h5>
<p>{{type}}</p> <-- （1） $scope.typeの値を表示 -->
</div>
</div>
<!-- （2） $scope.online = trueの時に表示 -->
<div class="alert alert-success" role="alert" ng-show="online">
<p>オンラインです</p>
</div>
<!-- （3） $scope.offline = trueの時に表示 -->
<div class="alert alert-danger" role="alert" ng-show="offline">
<p>オフラインです</p>
</div>
</div>
AngularJSでは（1）のように表記することで$scope.typeの値を表示しています。このように、HTMLに変数の値を簡単に表示できます。
また、（2）、（3）ではng-showという属性で値がtrueの時にはそのときのDOM要素が表示されます。
これで、online時とoffline時で表示を切り替えています。
ここではAngularJSの使い方の説明ではありませんのでもっと詳しく知りたい方は、こちらを参照して頂ければこれらの使い方がより理解できると思います。
