Ionic: проверьте подключение к интернету с помощью Cordova

я работаю над ионной структурой и сталкиваюсь с проблемами, используя API сети Apache Cordova для обнаружения подключения к интернету в Android App. Я упомянул этой учебник, а также создал демо-проект, который работает нормально.

я следовал приведенным ниже шагам. [из учебника]

  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. Run ionic run android

это хорошо

вопрос

  1. Копировать Вставить www С mainproject to testApp и выполните шаги 6 и 7

я получаю предупреждение Cannot find Window.Connection

после копировать вставить 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 после копирования вставить как что ж.

9
angularjs cordova cordova-plugins ionic ionic-framework

5 ответов

Я решил аналогичную проблему с помощью ngcordova . Это дает вам угловую обертку вокруг плагина, который реализует обещания.

часто Плагины Cordova не готовы, когда вы пытаетесь их вызвать, используя интерфейс promise, вы можете избежать получения неопределенных ошибок.

Я украл пример со страницы ngcordova в сетевом плагине здесь.

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, вы можете проверить сообщение, которое я написал, которое буквально шаг за шагом говорит вам, где и почему вы должны поместить какой-то фрагмент кода (может быть полезно, если вы только начинаете с Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.

кроме того, я сделал код примера доступным свободно на Github: https://github.com/Hitman666/IonicNetworkInfo.

edit: согласно правилам StackOverflow, я добавляю содержимое сообщения здесь:

шаг за шагом о том, как сделать это сами

начните новый ионный проект, выполнив:

ionic start IonicNetworkInfo blank

затем измените каталог на вновь созданный IonicNetworkInfo:

cd IonicNetworkInfo

установить ngCordova с Bower:

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'])

создайте новый контроллер в www/js / app.файл js с именем MyCtrl со следующим содержимым:

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

затем вы регистрируете два события $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);
});

в индекс.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, мы показываем уведомления "я в сети" / "я в автономном режиме".

только для справки, содержание всего индекса.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

просто используйте этот код в своем приложении.js внутри .запустить 

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

прежде чем вызывать "соединение", необходимо проверить устройство:

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

если вы недавно обновили (запуск cordova 5.0), мое предположение было бы cordova-plugin-whitelist необходимо установить. После установки добавьте это в конфиг.в XML разрешить все http / S запросы:

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="*" />
1