使用科尔多瓦检查互联网连接。

I am working on Ionic Framework, and facing issues using the Apache Cordova Network API to detect internet connection in Android App. I have referred this tutorial and also created a demo project, which works fine.

我在做Ionic Framework，遇到了使用Apache Cordova网络API检测Android App中internet连接的问题。我参考了本教程，并创建了一个demo project，效果很好。

I have followed the below steps. [from the tutorial]

我遵循了以下步骤。(从本教程)

1. ionic start testApp sidemenu

   离子开始testApp sidemenu

2. ionic platform add android

   离子android平台添加

3. Open testApp/www/js/app.js

   打开testApp / www / js / app.js

4. Copy paste this 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. Install Cordova Plugin cordova plugin add org.apache.cordova.network-information

   安装Cordova插件可以添加com .apache.cordova.net -information

6. Build ionic build android

   构建离子构建android

7. Run ionic run android

   离子跑android

This works fine

这工作好

Issue

问题

8. Copy Paste www from mainproject to testApp and do steps 6 and 7
9. 从主项目复制粘贴www到testApp，执行步骤6和步骤7

I get a alert Cannot find Window.Connection

我得到一个无法找到window。connection的警告

After copy pasting the app.js looks like this

复制粘贴后的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');
}

  });
})

The moment I copy paste my app.js and controllers.js to the testApp/www/js directory the whole thing blows up.

当我复制粘贴我的app.js和控制器的时候。到testApp/www/js目录，整个东西都爆炸了。

Any help in debugging is highly appreciated.

对调试的任何帮助都非常感谢。

Thanks,

谢谢,

Note

请注意

I do have cordova.js in index.html.

我有科尔多瓦。js index . html。

I have re installed platforms and plugins after copy paste as well.

复制粘贴后，我重新安装了平台和插件。

5 个解决方案

#1

I solved a similar issue by using ngcordova . It gives you an angular wrapper around the plugin that implements promises.

我用ngcordova解决了一个相似的问题。它为您提供了一个围绕实现承诺的插件的有棱角的包装器。

Often Cordova plugins aren't ready when you try to call them, using the promise interface you can avoid getting undefined errors.

通常，当你试图调用Cordova插件时，它们还没有准备好，使用承诺接口可以避免出现未定义的错误。

I stole the example from the ngcordova page on the network plugin here.

我在网络插件的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);
});

#2

For anyone new visiting and having problems with getting Armed10's answer working, you may want to check the post I wrote which goes literally step by step telling you where and why you should put some piece of code (may be useful if you're just starting with Ionic): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.

对于任何一个新访问的人，在获得Armed10的回答问题时，你可能会想要查看我写的文章，它逐字逐句地告诉你在哪里以及为什么应该放一些代码(如果你只是从Ionic开始的话，可能会有用):http://www.nikola-breznjak.com/blog/codeproject/check- Ionic -famework/。

Also, I made the example code available freely on Github: https://github.com/Hitman666/IonicNetworkInfo.

此外，我还在Github上免费提供了示例代码:https://github.com/Hitman666/IonicNetworkInfo。

edit: As per *'s rules, I'm adding the post content here as well:

编辑:根据*的规则，我也在这里添加文章内容:

Step by step on how to make this yourself

一步一步地来做这个

Start a new Ionic project by doing:

开始一个新的离子项目，做:

ionic start IonicNetworkInfo blank

Then, change the directory to the newly created IonicNetworkInfo:

然后，将目录更改为新创建的IonicNetworkInfo:

cd IonicNetworkInfo

Install ngCordova with Bower:

安装与鲍尔ngCordova:

bower install ngCordova

If by some chance you don’t have bower installed, you can install it with npm:

如果你没有安装凉亭，你可以用npm安装:

npm install bower -g

Open up the www/index.html file in your favorite editor, and add the reference to ngCordova (just above the cordova.js script):

打开www /索引。在您最喜欢的编辑器中添加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>

Install the ngCordova network plugin by executing the following command in your Terminal/Command prompt (you should do this from the root directory of your app; so, in our case the IonicNetworkInfo directory):

通过在您的终端/命令提示符中执行以下命令来安装ngCordova网络插件(您应该从应用程序的根目录中执行此命令;因此，在我们的例子中，IonicNetworkInfo目录):

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

To check if you have successfully installed the plugin, you can run the following command (from the root directory – I won’t be repeating this anymore; when I say you should run some command from the Terminal/Command prompt that, in this case, means from the root directory of the application):

要检查您是否成功安装了插件，您可以运行以下命令(从根目录—我将不再重复此命令;当我说您应该从终端/命令提示符运行一些命令时(在本例中，该命令表示来自应用程序的根目录):

cordova plugin list

You should see the following output:

您应该看到以下输出:

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

Open up the www/js/app.js file and add ngCordova to the dependencies list, so that basically the first line looks like this:

打开www / js /应用程序。js文件并将ngCordova添加到依赖列表中，因此第一行基本上是这样的:

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

Create a new controller in the www/js/app.js file called MyCtrl, with the following content:

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

In this controller you attach an event listener on the deviceready event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:

在这个控制器中，您在deviceready事件上附加一个事件监听器(因为在此代码运行时，设备可能还没有初始化)，您可以通过以下方式获取网络信息:

$cordovaNetwork.getNetwork();

The information, about weather you’re connected to the internet is obtained with the following line:

你连接到互联网上的天气信息如下:

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

Then, you register two events $cordovaNetwork:online and $cordovaNetwork:online which trigger when the device gets online/offline. In them you then just update the $scope variables (). Just for reference, the whole content of the www/js/app.js file should be:

然后，注册两个事件$cordovaNetwork:online和$cordovaNetwork:当设备上线/下线时触发。然后只需更新$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);
});

In the index.html file, inside the ion-content tag paste the following content:

在索引中。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>

Basically what we do here is we show the contents of the network variable (which is attached to the $scope via the controller). Also, by using the ion-toggle component we show the “I’m online” / “I’m offline” notifications.

基本上，我们在这里所做的是显示网络变量的内容(它通过控制器连接到$scope)。此外，通过使用ion-toggle组件，我们可以显示“我在线”/“我离线”通知。

Just for reference, the content of the whole index.html file should look like this:

仅供参考，整个索引的内容。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>

In order to test this application you should run it on your device (because you can’t disable network in iOS simulator). If you have an Android device plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:

为了测试这个应用程序，你应该在你的设备上运行它(因为你不能在iOS模拟器中禁用网络)。如果你的电脑安装了Android设备(以及所有的sdk)，你可以运行以下命令，让你的应用程序在你的Android设备上运行:

ionic build android && ionic run android

#3

just use this code in your app.js inside .run

只需在.run内的app.js中使用此代码

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

#4

Before you call the "connection", you need to check the device:

在调用“连接”之前，需要检查设备:

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

#5

If you updated recently (running cordova 5.0), my guess would be the cordova-plugin-whitelist needs to be installed. After installing, add this to config.xml to allow all http/s requests :

如果你最近更新了(运行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:

config . xml:

<allow-navigation href="*" />