network-information

Mediate el uso de este plugin de Apache Cordova podemos obtener información sobre el tipo de conexión a Internet de la que dispone nuestro dispositivo. Este plugin trabaja con un objeto denominado connection, mediante el cual, valiéndonos de sus constantes y propiedades, accede a dicha información.

org.apache.cordova.network-information

Instalación

El primer paso será instalar el plugin en el proyecto de Cordova que queramos utilizarlo. Nos situamos en el directorio del mismo y escribimos el siguiente comando:

cordova plugin add org.apache.cordova.network-information

Seguidamente importamos el proyecto al entorno de desarrollo con el que estemos trabajando, en nuestro caso, Android Developer Tools. Analicemos el código fuente de la aplicación en sí, es decir, el fichero assets/www/index.html

INDEX.HTML

Dentro del méodo OnDeviceReady() vamos a trabajar con el funcionamiento de la aplicación y el plugin Network-Information. O lo que es lo mismo, codificamos cuando todas las APIs de Cordova están cargadas. Seguidamente, por comodidad, vamos a trabajar con JQuery para mostrar la información obtenida mediante el plugin.

En su interior nos encontramos con la función checkConnection(), la cual va a devolver la información que queremos. Para ello, creamos la variable networkState que va a almacenar la propiedad type del objeto connection.

var networkState = navigator.connection.type;

Esta propiedad va a devolvernos una constante, dependiendo del tipo de conexión de nuestro dispositivo. Como queremos visualizar en pantalla el tipo de conexión, vamos a crear un array que almacene cadenas de texto con nombres de diferentes tipos de conexión, usando el valor de estas constantes como índices.

var states = {};

states[Connection.UNKNOWN]  = 'DESCONOCIDO';

states[Connection.ETHERNET] = 'ETHERNET';

states[Connection.WIFI]     = 'CONECTADO A WIFI';

states[Connection.CELL_2G]  = 'CONEXION 2G';

states[Connection.CELL_3G]  = 'CONEXION 3G';

states[Connection.CELL_4G]  = 'CONEXION 4G';

states[Connection.CELL]     = 'CONEXION MOVIL ESTANDAR';

states[Connection.NONE]     = 'SIN CONEXION';

De este modo, si invocamos al array usando como índice la variable que hemos creado al principio, obtenemos la cadena que especifica el tipo de conexión del dispositivo. Haremos que la función devuelva esa cadena:

return states[networkState];

Ahora podemos introducir la cadena de texto en cualquier parte del código HTML, usando JQuery y llamando a la función checkConnection()

$("#conx").text(checkConnection());

Y con esto ya tenemos una aplicación HTML5 en Android que nos especifica el tipo de conexión a Internet de nuestro dispositivo móvil:

Plataformas Soportadas

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • iOS
  • Windows Phone 7 and 8
  • Tizen
  • Windows 8

Propiedades

  • connection.type

Constantes

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