web-dev-qa-db-fra.com

Ionic: Vérifiez la connexion Internet à l'aide de Cordova

Je travaille sur Ionic Framework et je rencontre des problèmes en utilisant Apache Cordova Network API pour détecter la connexion Internet dans Android App. I ont référé this tutoriel et ont également créé un projet de démonstration, qui fonctionne très bien.

J'ai suivi les étapes ci-dessous. [du tutoriel]

  1. ionic start testApp sidemenu

  2. ionic platform add Android

  3. Ouvert testApp/www/js/app.js

  4. Copiez collez ce code

    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. Installer le plugin Cordova cordova plugin add org.Apache.cordova.network-information

  6. Construire ionic build Android

  7. Courir ionic run Android

Cela fonctionne bien

Problème

  1. Copiez Coller www de mainproject vers testApp et effectuez les étapes 6 et 7

Je reçois une alerte Cannot find Window.Connection

Après copier coller le app.js ressemble à ça

.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');
}

  });
})

Au moment où je copie, collez mon app.js et controllers.js à la testApp/www/js répertoire le tout explose.

Toute aide au débogage est très appréciée.

Merci,

Remarque

J'ai en effet cordova.js dans index.html.

J'ai également réinstallé platforms et plugins après le copier-coller.

angularjscordovaionic-frameworkioniccordova-plugins
9
Incpetor

J'ai résolu un problème similaire en utilisant ngcordova . Il vous donne une enveloppe angular autour du plugin qui implémente les promesses.

Souvent, les plugins Cordova ne sont pas prêts lorsque vous essayez de les appeler, en utilisant l'interface de promesse, vous pouvez éviter d'obtenir des erreurs non définies.

J'ai volé l'exemple de la page ngcordova sur le plugin réseau ici .

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

Pour toute nouvelle visite et ayant des problèmes pour que la réponse d'Armed10 fonctionne, vous voudrez peut-être vérifier le message que j'ai écrit qui va littéralement étape par étape vous dire où et pourquoi vous devez mettre un morceau de code (peut être utile si vous ne faites que commencer) avec Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/ .

En outre, j'ai rendu l'exemple de code disponible gratuitement sur Github: https://github.com/Hitman666/IonicNetworkInfo .

edit: Selon les règles de StackOverflow, j'ajoute également le contenu du post ici:

Étape par étape sur la façon de le faire vous-même

Démarrez un nouveau projet Ionic en faisant:

ionic start IonicNetworkInfo blank

Ensuite, changez le répertoire en IonicNetworkInfo nouvellement créé:

cd IonicNetworkInfo

Installez ngCordova avec Bower:

bower install ngCordova

Si, par hasard, vous n'avez pas installé bower, vous pouvez l'installer avec npm:

npm install bower -g

Ouvrez le fichier www/index.html dans votre éditeur préféré et ajoutez la référence à ngCordova (juste au-dessus du script 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>

Installez le plugin réseau ngCordova en exécutant la commande suivante dans votre terminal/invite de commande (vous devez le faire à partir du répertoire racine de votre application; donc, dans notre cas, le répertoire IonicNetworkInfo):

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

Pour vérifier si vous avez correctement installé le plugin, vous pouvez exécuter la commande suivante (à partir du répertoire racine - je ne répéterai plus cela; quand je dis que vous devez exécuter une commande à partir du terminal/invite de commande qui, dans ce cas , signifie à partir du répertoire racine de l'application):

cordova plugin list

Vous devriez voir la sortie suivante:

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

Ouvrez le fichier www/js/app.js et ajoutez ngCordova à la liste des dépendances, de sorte que la première ligne ressemble à ceci:

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

Créez un nouveau contrôleur dans le fichier www/js/app.js appelé MyCtrl, avec le contenu suivant:

.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);
})

Dans ce contrôleur, vous attachez un écouteur d'événements à l'événement deviceready (car il se pourrait que le périphérique n'ait pas encore été initialisé lorsque ce code s'exécute) et vous obtenez les informations réseau avec:

$cordovaNetwork.getNetwork();

Les informations sur la météo à laquelle vous êtes connecté à Internet sont obtenues avec la ligne suivante:

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

Ensuite, vous enregistrez deux événements $ cordovaNetwork: en ligne et $ cordovaNetwork: en ligne qui se déclenchent lorsque l'appareil se met en ligne/hors ligne. Vous y mettez ensuite à jour les variables $ scope (). Juste pour référence, le contenu entier du fichier www/js/app.js doit être:

// 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);
});

Dans le fichier index.html, à l'intérieur de la balise ion-content, collez le contenu suivant:

<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>

Fondamentalement, ce que nous faisons ici, c'est que nous montrons le contenu de la variable réseau (qui est attachée à la portée $ via le contrôleur). De plus, en utilisant le composant à bascule ionique, nous affichons les notifications "Je suis en ligne"/"Je suis hors ligne".

Juste pour référence, le contenu de tout le fichier index.html devrait ressembler à ceci:

    <!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>

Pour tester cette application, vous devez l'exécuter sur votre appareil (car vous ne pouvez pas désactiver le réseau dans le simulateur iOS). Si vous avez un Android connecté à votre ordinateur (et tous les SDK en place), vous pouvez exécuter les commandes suivantes pour que votre application s'exécute sur votre Android = appareil:

ionic build Android && ionic run Android
6
Nikola

utilisez simplement ce code dans votre app.js à l'intérieur de .run

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

Si vous avez mis à jour récemment (exécutant cordova 5.), je suppose que le cordova-plugin-whitelist doit être installé. Après l'installation, ajoutez ceci à config.xml pour autoriser toutes les requêtes http/s:

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

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

Coquille:

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

Config.xml:

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

Avant d'appeler la "connexion", vous devez vérifier l'appareil:

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