Issue with PhoneGap Network Information Plugin on iOS

问题

I'm working on a PhoneGap app, and have an issue with installing one particular module, "Network Information" (https://github.com/apache/cordova-plugin-network-information). phonegap -v shows I'm running version 5.3.7

All other plugins seem to be working fine. This is an issue in the application I'm working on but I've also managed to reproduce it in a new application: The only two files I've changed are index.html and js/index.js in this example, and there is no js/cordova.js file, which is automatically included (Cordova Network and Camera API returns undefined)

I've created the app using the following commands:

phonegap create ios-test
cd ios-test
phonegap cordova plugin add cordova-plugin-dialogs
phonegap cordova plugin add cordova-plugin-network-information

The output of phonegap cordova plugin list is:

cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-network-information 1.0.1 "Network Information"

Based on a suggestion here I've wrapped this in a setTimeout() call, but that doesn't seem to make a difference.

Here is the HTML (index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

And the JS:

var app = {
    initialize: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        navigator.notification.alert('Test', null, 'Test', 'OK');

        setTimeout(function() {
            navigator.notification.alert('Debug', null, 'Checking connection', 'OK');

            if (navigator.connection == undefined) {
                navigator.notification.alert('navigator.connection is undefined', null, 'Error', 'OK');
                return;
            }

            var networkState = navigator.connection.type;

            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.CELL]     = 'Cell generic connection';
            states[Connection.NONE]     = 'No network connection';

            navigator.notification.alert('Network Status', null, 'Connection type: ' + states[networkState], 'OK');
        }, 5000);
    }
};

Upon running the code with phonegap serve and the Developer app on my iPhone, I get the Debug alert then see "navigator.connection is undefined".

I've also tried to build for iOS:

phonegap platform add ios

Adding ios project...
Running command: /Users/James/.cordova/lib/npm_cache/cordova-ios/3.9.2/package/bin/create /Web/ios-test/platforms/ios com.phonegap.helloworld "Hello World" --cli
iOS project created with cordova-ios@3.9.2
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
Installing "cordova-plugin-dialogs" for ios
Installing "cordova-plugin-network-information" for ios

This creates a platforms/ios folder, but I still have the same issue.

I've also tried:

Checking ARC is enabled, iOS8 phonegap cordova network-information app crashes
Adding the following to config.xml Check internet connection on iOS app with Cordova Phonegap 3.3.0 not working:

<feature name="NetworkStatus">
  <param name="ios-package" value="CDVConnection" />
</feature>

Using navigator.network.connection.type instead, Check internet connection on iOS app with Cordova Phonegap 3.3.0 not working
Checking AudioToolbox.framework and SystemConfiguration.framework are both added: Cordova Network Plugin does not build on iOS

回答1:

You are not using the this context correctly. This is a common mistake. The Javascript this does NOT work like the Java this.

The reason it does not work is because the this gets resolved at run-time, not assemble-time (or compile-time). When the event fires, this resolves to the the global this because your app object is now out of scope. The event fires *outside* of your app object.

A quick fix would be to do app.onDeviceReady instead of ~~this.onDeviceReady~~ You can test this by making youronDeviceReady() a global function and leaving the this in place.

OHH, and that setTimeout() answer is someone that does not know they need to wait for the deviceready event. Bad code and bad advice abound in the Javascript world.

These videos should help. – Best of Luck.

Context in JavaScript - 1/4 - Purpose and Problems with JavaScript's "This"
Context in JavaScript - 2/4 - How JavaScript Decides What "This" Actually Is
Context in JavaScript - 3/4 - "This" May Not Be What You Expected & How to Fix It
Context in JavaScript - 4/4 - Mastering "This:" Additional Techniques & Future Support

回答2:

For anyone interested, I did manage to get this working with PhoneGap Build using the following:

<gap:plugin name="cordova-plugin-network-information" version="1.0.1" />

<feature name="Geolocation">
    <param name="ios-package" value="CDVLocation" />
</feature>

No luck with CLI though, so leaving this unanswered as that was the original question (and would still be easier to get that working).

来源：https://stackoverflow.com/questions/33647478/issue-with-phonegap-network-information-plugin-on-ios

标签

ios

cordova

phonegap-plugins

cordova-plugins