cordova-plugin-network-information
此插件提供了旧版 网络信息 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.type
为Connection.ETHERNET
。
浏览器特性
- 浏览器无法检测网络连接类型。
navigator.connection.type
在联机时始终设置为Connection.UNKNOWN
。
与网络相关的事件
offline
当应用程序离线且设备未连接到互联网时,会触发此事件。
document.addEventListener("offline", yourCallbackFunction, false);
详细信息
当先前连接的设备失去网络连接,导致应用程序无法再访问互联网时,会触发 offline
事件。它依赖于与 Connection API 相同的信息,并在 connection.type
的值变为 NONE
时触发。
应用程序通常应使用 document.addEventListener
在 deviceready
事件触发后附加事件监听器。
快速示例
document.addEventListener("offline", onOffline, false);
function onOffline() {
// Handle the offline event
}
特性
此插件无法在后台广播事件。使用 navigator.connection.type
在 resume 事件中检查连接状态。
iOS 特性
在初始启动期间,第一个离线事件(如果适用)至少需要一秒钟才能触发。
online
当应用程序联机且设备连接到互联网时,会触发此事件。
document.addEventListener("online", yourCallbackFunction, false);
详细信息
当先前未连接的设备收到网络连接,允许应用程序访问互联网时,会触发 online
事件。它依赖于与 Connection API 相同的信息,并在 connection.type
从 NONE
更改为任何其他值时触发。
应用程序通常应使用 document.addEventListener
在 deviceready
事件触发后附加事件监听器。
快速示例
document.addEventListener("online", onOnline, false);
function onOnline() {
// Handle the online event
}
特性
此插件无法在后台广播事件。使用 navigator.connection.type
在 resume 事件中检查连接状态。
iOS 特性
在初始启动期间,第一个 online
事件(如果适用)至少需要一秒钟才能触发,在此之前 connection.type
为 UNKNOWN
。
示例:根据您的网络状态上传文件
本节中的代码示例展示了使用联机和离线事件以及您的网络连接状态来更改应用程序行为的示例。
首先,创建一个新的 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");
}