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
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, podemos obtener informació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-informationDespués importamos el proyecto al entorno de desarrollo para hacer las pruebas pertinentes.
Este sería el código de la aplicación web. El plugin trabaja con un objeto de Javascript denominado connection, el cual contiene varias constantes y una propiedad (type). Usando ambos, en la función checkConnection() se asocian cadenas de texto a los diferentes valores de las constantes en un array, que hacen las veces de índices del mismo. De esta forma, cuando lo mostremos, obtendremos un mensaje personalizado que nos especifica en español qué tipo de conexión tiene nuestro dispositivo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/tabla.css" />
<title>Network Info Plugin</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// mostramos en un mensaje de javascript el tipo de conexión que utiliza el dispositivo
function onDeviceReady() {
$(document).ready(function(){
function checkConnection() {
var networkState = navigator.connection.type; //Este plugin trabaja con el objeto CONNECTION
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';
return states[networkState];
}
$("#conx").text(checkConnection());
});
}
</script>
</head>
<body onload="onLoad()">
<div class="app">
<h1>ESTADO DE LA CONEXION</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div class="generatecss_dot_com_table">
<table>
<tr>
<td>TIPO DE CONEXION</td>
</tr>
<tr>
<td id="conx"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Podéis ver una explicación más detallada de este ejercicio, así como del código, en la documentación oficial del proyecto. Por último, aquí un vídeo con la aplicación en marcha:
No hay comentarios:
Publicar un comentario