Как получить информацию о сети (интернет-соединении) в приложении Cordova

Содержание

1 Требования
2 Используя плагин
3 Неформат

Если вы работаете над сложным приложением (мобильным приложением или даже веб-приложением), где требуется потребление данных пользователем, очень важно знать тип подключения. Главным образом, чтобы узнать, если вы должны предоставить богатый опыт или эффективную полосу пропускания в соответствии с ресурсами вашего пользователя.

На сегодняшний день для стандартов HTML5 есть доступный API для новейших браузеров, названный API Network Information. К сожалению, этот API доступен не во всех браузерах, а в Cordova его даже нет. Чтобы получить информацию о сетевом подключении пользователя, мы будем использовать Cordova Сетевой информационный плагин.

Требования

Как упоминалось ранее, чтобы узнать состояние интернет-соединения на устройстве с Cordova, мы собираемся использовать плагин Cordova Network Information. Этот плагин обеспечивает реализацию старой версии API информации о сети. Он предоставляет информацию о сотовой и Wi-Fi-связи устройства, а также о том, есть ли у устройства подключение к Интернету.

Чтобы установить плагин Cordova Network Information, выполните следующую команду в своем терминале:

cordova plugin add cordova-plugin-network-information

После установки navigator.connection Объект будет доступен в документе. Если вы хотите больше информации о плагине, посетите Официальный репозиторий Github здесь.

Используя плагин

Как упоминалось ранее, плагин будет загружать connection объект в navigator объект в окне. Кроме того, константа по имени 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 доступ к объекту Connection осуществлялся через navigator.network.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, потрясающий пользовательский интерфейс!

Неформат

Хотя API информации о сети доступен в новейших версиях браузеров, он не доступен в Cordova, поэтому для него нужно использовать плагин. Хотя знание типа соединения на самом деле не дает вам всей информации, которая вам, вероятно, может понадобиться для вычисления странных вещей, таких как скорость или другой статус, может быть полезно принять решение о том, какой контент отправлять с сервера на устройство. в интернет-соединении (исходя из предположений), чтобы предупредить пользователя об огромных загрузках, даже если он использует соединение 3G и т. д.