cordova-plugin-network-information

Android Testsuite Chrome Testsuite iOS Testsuite Lint Test

此插件提供了旧版 网络信息 API 的实现。它提供有关设备蜂窝网络和 Wi-Fi 连接的信息,以及设备是否具有互联网连接。

要获得一些有关如何使用此插件的想法,请查看此页面底部的 示例,或直接转到 参考 内容。

安装

cordova plugin add cordova-plugin-network-information

支持的平台

  • Android
  • 浏览器
  • iOS
  • Windows

连接

connection 对象通过 navigator.connection 公开,提供有关设备蜂窝网络和 Wi-Fi 连接的信息。

属性

  • connection.type

常量

  • Connection.UNKNOWN
  • Connection.ETHERNET
  • Connection.WIFI
  • Connection.CELL_2G
  • Connection.CELL_3G
  • Connection.CELL_4G
  • Connection.CELL
  • Connection.NONE

connection.type

此属性提供了一种快速方法来确定设备的网络连接状态和连接类型。

快速示例

function checkConnection() {
    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';

    alert('Connection type: ' + states[networkState]);
}

checkConnection();

iOS 特性

  • <iOS7 无法检测蜂窝网络连接类型。
    • navigator.connection.type 对所有蜂窝数据都设置为 Connection.CELL

Windows 特性

  • 在 Phone 8.1 模拟器中运行时,始终检测到 navigator.connection.typeConnection.ETHERNET

浏览器特性

  • 浏览器无法检测网络连接类型。navigator.connection.type 在联机时始终设置为 Connection.UNKNOWN

与网络相关的事件

offline

当应用程序离线且设备未连接到互联网时,会触发此事件。

document.addEventListener("offline", yourCallbackFunction, false);

详细信息

当先前连接的设备失去网络连接,导致应用程序无法再访问互联网时,会触发 offline 事件。它依赖于与 Connection API 相同的信息,并在 connection.type 的值变为 NONE 时触发。

应用程序通常应使用 document.addEventListenerdeviceready 事件触发后附加事件监听器。

快速示例

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // Handle the offline event
}

特性

此插件无法在后台广播事件。使用 navigator.connection.typeresume 事件中检查连接状态。

iOS 特性

在初始启动期间,第一个离线事件(如果适用)至少需要一秒钟才能触发。

online

当应用程序联机且设备连接到互联网时,会触发此事件。

document.addEventListener("online", yourCallbackFunction, false);

详细信息

当先前未连接的设备收到网络连接,允许应用程序访问互联网时,会触发 online 事件。它依赖于与 Connection API 相同的信息,并在 connection.typeNONE 更改为任何其他值时触发。

应用程序通常应使用 document.addEventListenerdeviceready 事件触发后附加事件监听器。

快速示例

document.addEventListener("online", onOnline, false);

function onOnline() {
    // Handle the online event
}

特性

此插件无法在后台广播事件。使用 navigator.connection.typeresume 事件中检查连接状态。

iOS 特性

在初始启动期间,第一个 online 事件(如果适用)至少需要一秒钟才能触发,在此之前 connection.typeUNKNOWN

示例:根据您的网络状态上传文件

本节中的代码示例展示了使用联机和离线事件以及您的网络连接状态来更改应用程序行为的示例。

首先,创建一个新的 FileEntry 对象 (data.txt) 用于示例数据。从 deviceready 处理程序调用此函数。

注意 此代码示例需要 File 插件。

var dataFileEntry;

function createSomeData() {

    window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {

        console.log('file system open: ' + fs.name);
        // Creates a new file or returns an existing file.
        fs.root.getFile("data.txt", { create: true, exclusive: false }, function (fileEntry) {

          dataFileEntry = fileEntry;

        }, onErrorCreateFile);

    }, onErrorLoadFs);
}

接下来,在 deviceready 处理程序中添加联机和离线事件的监听器。

document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

应用程序的 onOnline 函数处理联机事件。在事件处理程序中,检查当前网络状态。在此应用程序中,将除 Connection.NONE 之外的任何连接类型视为良好连接。如果您有连接,则尝试上传文件。

function onOnline() {
    // Handle the online event
    var networkState = navigator.connection.type;

    if (networkState !== Connection.NONE) {
        if (dataFileEntry) {
            tryToUploadFile();
        }
    }
    display('Connection type: ' + networkState);
}

当联机事件在前面的代码中触发时,调用应用程序的 tryToUploadFile 函数。

如果上传失败,则调用应用程序的 offlineWrite 函数将当前数据保存到某个位置。

注意 为简单起见,省略了文件读取和写入。有关文件处理的更多信息,请参阅 cordova-plugin-file 文档。

function tryToUploadFile() {
    // !! Assumes variable fileURL contains a valid URL to a text file on the device,
    var fileURL = getDataFileEntry().toURL();
    
    getFileBlobSomehow(fileURL, function(fileBlob) {
        var success = function (r) {
            console.log("Response = " + r.response);
            display("Uploaded. Response: " + r.response);
        };

        var fail = function (error) {
            console.log("An error has occurred: Code = " + error.code || error.status);
            offlineWrite("Failed to upload: some offline data");
        }

        var xhr = new XMLHttpRequest();

        xhr.onerror = fail;
        xhr.ontimeout = fail;
        xhr.onload = function() {
            // If the response code was successful...
            if (xhr.status >= 200 && xhr.status < 400) {
                success(xhr);
            }
            else {
                fail(xhr)
            }
        }

        // Make sure you add the domain of your server URL to the
        // Content-Security-Policy <meta> element in index.html.
        xhr.open("POST", encodeURI(SERVER));

        xhr.setRequestHeader("Content-Type", "text/plain");

        // The server request handler could read this header to
        // set the filename.
        xhr.setRequestHeader("X-Filename", fileURL.substr(fileURL.lastIndexOf("/") + 1));

        xhr.send(fileBlob);
    });
};

以下是 offlineWrite 函数的代码。

注意 此代码示例需要 File 插件。

function offlineWrite(offlineData) {
    // Create a FileWriter object for our FileEntry.
    dataFileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function () {
            console.log("Successful file write...");
            display(offlineData);
        };

        fileWriter.onerror = function (e) {
            console.log("Failed file write: " + e.toString());
        };

        fileWriter.write(offlineData);
    });
}

如果发生离线事件,只需执行类似于通知用户的操作(对于此示例,只需记录它)。

function onOffline() {
    // Handle the offline event
    console.log("lost connection");
}