web-dev-qa-db-ja.com

Ionic：Cordovaを使用してインターネット接続を確認する

Ionicフレームワークで作業しており、 Apache Cordova Network API を使用して問題に直面していますAndroid App。 this チュートリアルを参照し、正常に動作するデモプロジェクトも作成しました。

以下の手順に従いました。 [チュートリアルから]

  1. ionic start testApp sidemenu

  2. ionic platform add Android

  3. testApp/www/js/app.jsを開く

  4. このコードをコピーして貼り付け

    if(window.Connection) {

  if(navigator.connection.type == Connection.NONE) {
      alert('There is no internet connection available');
  }else{
      alert(navigator.connection.type);
  }
}else{
      alert('Cannot find Window.Connection');
}

  5. Cordovaプラグインのインストールcordova plugin add org.Apache.cordova.network-information

  6. ビルドionic build Android

  7. ionic run Androidを実行します

これはうまくいきます

問題

  1. 貼り付けwwwをmainprojectからtestAppにコピーして、手順6と7を実行します

アラートが表示されますCannot find Window.Connection

Afterコピー貼り付けapp.jsは次のようになります

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.Apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    // check internet connection
    //alert(window.Connection);
    alert('Hi')
    try {
       alert('Naviagtor says'+navigator.connection.type);
     }
    catch(err) {
       alert( 'Error '+ err.message) 
       //here i get 'Error cannot read property type of undefined'
     }

if(window.Connection) {
    if(navigator.connection.type == Connection.NONE) {
        alert('There is no internet connection available');
    }else{
        alert(navigator.connection.type);
    }
}else{
    alert('Cannot find Window.Connection');
}

  });
})

私のapp.jsとcontrollers.jsをtestApp/www/jsディレクトリにコピーして貼り付けた瞬間、すべてが爆発しました。

デバッグのヘルプは高く評価されます。

おかげで、

注

cordova.jsにはindex.htmlがあります。

コピー貼り付け後、platformsとpluginsも再インストールしました。

angularjscordovaionic-frameworkioniccordova-plugins
9
Incpetor

ngcordova を使用して同様の問題を解決しました。これは、promiseを実装するプラグインのangularラッパーを提供します。

多くの場合、Cordovaプラグインは、それらを呼び出そうとしたときに準備ができていません。promiseインターフェースを使用すると、未定義のエラーを回避できます。

ネットワークプラグインのngcordovaページから例を盗みました here 。

module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {

 document.addEventListener("deviceready", function () {

    var type = $cordovaNetwork.getNetwork()

    var isOnline = $cordovaNetwork.isOnline()

    var isOffline = $cordovaNetwork.isOffline()


    // listen for Online event
    $rootScope.$on('networkOffline', function(event, networkState){
      var onlineState = networkState;
    })

    // listen for Offline event
    $rootScope.$on('networkOffline', function(event, networkState){
      var offlineState = networkState;
    })

  }, false);
});
21
Armed10

Armed10の答えを機能させるのに問題があり、新しい訪問者がいる場合は、私が書いた投稿をチェックすることをお勧めします。 Ionicを使用）： http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/ 。

また、サンプルコードをGithubで自由に利用できるようにしました： https://github.com/Hitman666/IonicNetworkInfo 。

edit：StackOverflowのルールに従って、ここにも投稿コンテンツを追加します。

これを自分で作る方法のステップバイステップ

次のようにして、新しいIonicプロジェクトを開始します。

ionic start IonicNetworkInfo blank

次に、ディレクトリを新しく作成したIonicNetworkInfoに変更します。

cd IonicNetworkInfo

BowerでngCordovaをインストールします：

bower install ngCordova

たまたまbowerがインストールされていない場合は、npmでインストールできます。

npm install bower -g

Www/index.htmlファイルをお気に入りのエディターで開き、ngCordovaへの参照を追加します（cordova.jsスクリプトのすぐ上）：

<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

ターミナル/コマンドプロンプトで次のコマンドを実行して、ngCordovaネットワークプラグインをインストールします（これは、アプリのルートディレクトリから行う必要があります。この場合、IonicNetworkInfoディレクトリです）。

cordova plugin add org.Apache.cordova.network-information

プラグインが正常にインストールされたかどうかを確認するには、次のコマンドを（ルートディレクトリから）実行できます。これ以上繰り返すことはありません。ターミナル/コマンドプロンプトからコマンドを実行する必要があると言う場合、この場合は、アプリケーションのルートディレクトリからの意味）：

cordova plugin list

次の出力が表示されます。

> cordova plugin list                                                                                                                           
com.ionic.keyboard 1.0.4 "Keyboard"
org.Apache.cordova.network-information 0.2.15 "Network Information"

Www/js/app.jsファイルを開いてngCordovaを依存関係リストに追加すると、基本的に最初の行は次のようになります。

angular.module('starter', ['ionic', 'ngCordova'])

MyCtrlという名前のwww/js/app.jsファイルに、次の内容で新しいコントローラーを作成します。

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
})

このコントローラーでは、devicereadyイベントにイベントリスナーをアタッチし（このコードの実行時にデバイスがまだ初期化されていない可能性があるため）、次のようにしてネットワーク情報を取得します。

$cordovaNetwork.getNetwork();

インターネットに接続している天気に関する情報は、次の行で取得されます。

$scope.isOnline = $cordovaNetwork.isOnline();

次に、デバイスがオンライン/オフラインになったときにトリガーされる2つのイベント$ cordovaNetwork：onlineおよび$ cordovaNetwork：onlineを登録します。次に、$ scope変数（）を更新します。参考までに、www/js/app.jsファイルのコンテンツ全体は次のようになります。

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
});

Index.htmlファイルのion-contentタグ内に、次のコンテンツを貼り付けます。

<div class="card">
    <div class="item item-text-wrap">
        <h1>Network: {{network}}</h1>
    </div>
</div>


<div class="card">
    <div class="item item-text-wrap">
        <ion-toggle ng-model="isOnline" ng-checked="item.checked">
            <h1 ng-show="isOnline">I'm online</h1>
            <h1 ng-show="! isOnline">I'm offline</h1>
        </ion-toggle>
    </div>
</div>

基本的にここで行うことは、ネットワーク変数（コントローラーを介して$ scopeに接続されている）の内容を表示することです。また、ion-toggleコンポーネントを使用して、「オンラインです」/「オフラインです」という通知を表示します。

参考までに、index.htmlファイル全体のコンテンツは次のようになります。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="MyCtrl">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>

        <ion-content padding="true">
            <div class="card">
                <div class="item item-text-wrap">
                    <h1>Network: {{network}}</h1>
                </div>
            </div>

            <div class="card">
                <div class="item item-text-wrap">
                    <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                        <h1 ng-show="isOnline">I'm online</h1>
                        <h1 ng-show="! isOnline">I'm offline</h1>
                    </ion-toggle>
                </div>
            </div>

        </ion-content>
    </ion-pane>
</body>
</html>

このアプリケーションをテストするには、デバイスで実行する必要があります（iOSシミュレーターではネットワークを無効にできないため）。 Androidデバイスがコンピューターに接続されている場合（およびすべてのSDKが所定の場所にある場合）、次のコマンドを実行して、アプリケーションをAndroid =デバイス：

ionic build Android && ionic run Android
6
Nikola

.run内のapp.jsでこのコードを使用するだけです

if (window.Connection) {
       if (navigator.connection.type == Connection.NONE) {
         toast.show("Internet is disconnected on your device");
       };
     };
2
Ajeet Malviya

最近更新した場合（cordova 5.0を実行中）、私の推測はcordova-plugin-whitelistをインストールする必要があります。インストール後、これをconfig.xmlに追加して、すべてのhttp/sリクエストを許可します。

allow-intent href="http://\*/\*"

allow-intent href="https://\*/\*"

シェル：

ionic plugin add https://github.com/Apache/cordova-plugin-whitelist.git

Config.xml：

<allow-navigation href="*" />
1
Max

「接続」を呼び出す前に、デバイスを確認する必要があります。

document.addEventListener("deviceready", function () {
    ...
});
1
Sentence