如何在Cordova应用程序中检索网络(互联网连接)信息

本文概述

• 要求
• 使用插件
• 好奇心

如果你使用的是复杂的应用程序(移动应用程序或Web应用程序), 需要用户消耗数据, 则了解连接类型非常重要。主要是要根据用户的资源确定是否应该提供丰富的体验或带宽有效的体验。

到目前为止, 对于HTML5标准, 有一个适用于最新浏览器的可用API, 称为网络信息API。可惜的是, 该API并非在所有浏览器中都可用, 在Cordova中也不存在。为了获得有关用户网络连接的信息, 我们将使用Cordova网络信息插件。

要求

如前所述, 要了解Cordova设备中的Internet连接状态, 我们将使用Cordova网络信息插件。该插件提供了Network Information API的旧版本的实现。它提供有关设备的蜂窝和wifi连接以及设备是否具有Internet连接的信息。

要安装Cordova网络信息插件, 请在终端中执行以下命令：

cordova plugin add cordova-plugin-network-information

安装后, navigator.connection对象将在文档中可用。如果你想了解有关该插件的更多信息, 请访问此处的官方Github存储库。

使用插件

如前所述, 该插件会将连接对象加载到窗口的导航器对象中。此外, 一个名为Connection(对象)的常量将在你的文档中公开, 它具有以下结构：

{  
   "UNKNOWN":"unknown", "ETHERNET":"ethernet", "WIFI":"wifi", "CELL_2G":"2g", "CELL_3G":"3g", "CELL_4G":"4g", "CELL":"cellular", "NONE":"none"
}

现在, navigator.connection对象只有1个属性, 此属性是type。在Cordova 2.3.0之前, 通过navigator.network.connection访问Connection对象, 之后将其更改为navigator.connection以匹配W3C规范。它仍然可以在其原始位置使用, 但已过时, 最终将被删除。

考虑到此信息, 你可以找出设备的当前连接以创建自己的方法, 例如：

/**
 * Retrieve the type of internet connection of the device
 * @return {String} The status or undefined if the plugin isn't installed
 */
function getConnectionInfo() {
    // Verify if the plugin is installed
    if(typeof(Connection) == "undefined" || typeof(navigator.connection) == "undefined"){
        return "Plugin not installed";
    }
    
    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';

    return states[networkState];
}

然后只需执行该方法：

alert("The current connection is : " + getConnectionInfo());

很容易吧？现在, 优化你的代码, 为那些在乡村使用2G连接的用户提供绝佳的用户体验！

好奇心

尽管Network Information API在最新的浏览器版本中可用, 但在Cordova中不可用, 因此我们需要为其使用插件。尽管知道连接的类型并不能真正为你提供计算速度或其他状态之类的怪异事物所需的全部信息, 但决定从服务器向设备发送什么内容的决定可能非常有用。在互联网连接上(基于假设), 即使用户正在使用3G连接等, 也警告用户下载量过大。

编码愉快！