Ionico: Controllare la Connessione a Internet tramite Cordova

Sto lavorando su Ionico Quadro, e di fronte a problemi con il Apache Cordova API di Rete per rilevare la connessione a internet in App per Android.
Ho citato questo tutorial e ha anche creato un progetto demo, che funziona bene.

Ho seguito la procedura riportata di seguito. [da il tutorial]

  1. ionic start testApp sidemenu

  2. ionic platform add android

  3. Aprire testApp/www/js/app.js

  4. Copia incolla questo codice

    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. Installare Cordova Plugin cordova plugin add org.apache.cordova.network-information

  6. Costruire ionic build android

  7. Eseguire ionic run android

Questo funziona bene

Problema

  1. Copia Incolla www da mainproject per testApp e fare i passaggi 6 e 7

Ricevo un avviso Cannot find Window.Connection

Dopo copia e incolla il app.js simile a questo

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

  });
})

Momento in cui ho copia incolla del mio app.js e controllers.js per il testApp/www/js directory tutta la cosa salta.

Qualsiasi aiuto nel debug è molto apprezzato.

Grazie,

Nota

Ho cordova.js in index.html.

Ho re installato platforms e plugins dopo il copia incolla così.

  • hai provato stampa navigatore.connessione.tipo prima del controllo per la finestra.Di connessione? Che cosa vuol dire?
  • grazie per la risposta, ho aggiornato il codice di cui sopra. Come hai detto tu, ho provato a stampare il navigator.connection.type ma sembra che l’oggetto non è definito.
  • eseguire cordova plugin ls.. è un sms plugin elencati. Se non rimuovere le piattaforme android/ios e re aggiungerli
  • si prega di assicurarsi www da mainproject contiene la cartella plugins e anche il plugin che hai installato.
  • www cartella non contiene la cartella plugins. È al di fuori della cartella www del mainproject
InformationsquelleAutor Incpetor | 2015-01-13



5 Replies
  1. 21

    Ho risolto un problema simile utilizzando ngcordova . Ti dà un angolare wrapper per il plugin che implementa promesse.

    Spesso Cordova plugin non sono pronti quando si tenta di chiamare loro, con la promessa di interfaccia è possibile evitare di ottenere undefined errori.

    Ho rubato l’esempio del ngcordova pagina sulla rete plugin qui.

    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);
    });
    • Ciao, grazie per la risposta, il $cordovaNetwork.getNetwork() restituisce 0 invece di Connection.NONE e $cordova.isOnline() restituisce un errore. Io sono ancora bloccato con questo.
    • Avete seguito attentamente le istruzioni per installare e sono in esecuzione su un dispositivo o AVD? Io personalmente l’ho utilizzato una chiamata di prova al mio server per vedere se ho una connessione. Dopo aver wifi non significa che l’accesso a internet. Forse scrivere una chiamata al server e gestire i resi per vedere se si dispone di una connessione.
    • Utilizzare $rootScope.$on(‘$cordovaNetwork:offline ” e $rootScope.$on(‘$cordovaNetwork:online, invece, i vostri ascoltatori
  2. 6

    Per chi la visita e avendo problemi con ottenere Armed10 la risposta di lavoro, si potrebbe voler controllare il post che ho scritto che va letteralmente, passo per passo che ti dice dove e perché si dovrebbe mettere qualche pezzo di codice (può essere utile se si sta appena iniziando con Ionici): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.

    Anche, ho fatto l’esempio di codice disponibili liberamente su Github: https://github.com/Hitman666/IonicNetworkInfo.

    edit: Come per StackOverflow regole, sto aggiungendo il contenuto del post qui:

    Passo passo su come fare questo da soli

    Iniziare una nuova Ionico progetto da fare:

    ionic start IonicNetworkInfo blank

    Quindi, modificare la directory appena creata IonicNetworkInfo:

    cd IonicNetworkInfo

    Installare ngCordova con Bower:

    bower install ngCordova

    Se per caso non hai bower installato, è possibile installare con npm:

    npm install bower -g

    Aprire il www/index.html file nel vostro editor preferito e aggiungere il riferimento al ngCordova (appena sopra il cordova.js script):

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

    Installare il ngCordova rete plugin eseguendo il seguente comando nel Terminale/prompt dei comandi (si dovrebbe fare questo dalla directory principale dell’applicazione; quindi, nel nostro caso il IonicNetworkInfo directory):

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

    Per verificare se si è installato correttamente il plugin, è possibile eseguire il seguente comando (da root directory – io non ripetere più questo quando dico che si dovrebbe eseguire qualche comando da Terminale/prompt dei comandi che, in questo caso, significa dalla directory principale dell’applicazione):

    cordova plugin list

    Si dovrebbe vedere il seguente output:

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

    Aprire il www/js/app.js file e aggiungere ngCordova all’elenco delle dipendenze, in modo che, fondamentalmente, la prima riga simile a questa:

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

    Creare un nuovo controller www/js/app.js file chiamato MyCtrl, con il seguente contenuto:

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

    In questo controller si collega un listener di eventi sul deviceready evento (perché potrebbe essere che il dispositivo non è stato ancora inizializzato quando viene eseguito questo codice) e si ottiene le informazioni di rete con:

    $cordovaNetwork.getNetwork();

    Le informazioni meteo di essere connessi a internet è ottenuto con la seguente riga:

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

    Quindi, è possibile registrare due eventi $cordovaNetwork:online e $cordovaNetwork:online che si scatenano quando il dispositivo riceve online/offline. È poi basta aggiornare il $scope variabili ().
    Solo per riferimento, il contenuto di tutto il www/js/app.js il file deve essere:

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

    In index.html file, all’interno della ion-tag di contenuto incollare il seguente contenuto:

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

    Fondamentalmente ciò che facciamo qui è mostriamo il contenuto della variabile di rete (che è fissato a $scope tramite il controller). Inoltre, utilizzando ionica-attivare il componente ci mostra il “sono online” /“io sono offline” notifiche.

    Solo per riferimento, i contenuti dell’intero index.html il file dovrebbe essere simile a questo:

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

    Al fine di testare questa applicazione si dovrebbe eseguire sul proprio dispositivo (in quanto non è possibile disattivare la rete nel simulatore iOS). Se si dispone di un dispositivo Android collegato al computer (e tutti gli Sdk in place) è possibile eseguire i seguenti comandi per ottenere la vostra applicazione in esecuzione sul vostro dispositivo Android:

    ionic build android && ionic run android
    • grazie per il promemoria. Tuttavia, è “permesso”, sostanzialmente, di postare l’intero contenuto del mio post qui? Voglio dire, non ho alcun problema con esso, sto solo chiedendo se è così, grazie, e io aggiornerò a breve.
    • sì, va bene 🙂
    • Ciao @Nikola, sto vivendo lo stesso problema, ma la struttura del mio codice è un po ‘ diverso. Volevo solo chiedere come è possibile implementare questo come un servizio/fabbrica. Ho incluso qualche dettaglio in più circa il mio particolare problema qui: stackoverflow.com/questions/40123495/…. Sono breve, voglio creare una connessione in tempo reale monitor di stato per la mia domanda, ma a parte setinerval (come si vede qui: stackoverflow.com/a/40201808), in realtà non ho nessuna idea. Si prega di aiutare!
  3. 2

    basta usare questo codice app.js all’interno .eseguire

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

    Prima di chiamare il “collegamento”, è necessario controllare il dispositivo:

    document.addEventListener("deviceready", function () {
        ...
    });
    • Come implementare questo in una fabbrica/servizio?
  5. 1

    Se è stato aggiornato di recente (esecuzione di cordova 5.0), la mia ipotesi sarebbe la cordova-plugin-whitelist deve essere installato. Dopo l’installazione, aggiungere a questo config.xml per consentire a tutti di http/s richieste :

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

    Shell:

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

    Config.xml:

    <allow-navigation href="*" />

Lascia un commento