El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió de la informació de la xarxa

Següent ►
►

En aquest tema, aprendrem com gestionar la informació de la xarxa en aplicacions desenvolupades amb Apache Cordova. Això inclou la detecció de l'estat de la connexió a Internet, la identificació del tipus de connexió i la gestió de canvis en l'estat de la xarxa.

Objectius d'aprenentatge

  • Comprendre com utilitzar el plugin cordova-plugin-network-information.
  • Detectar l'estat de la connexió a Internet.
  • Identificar el tipus de connexió de xarxa.
  • Gestionar els canvis en l'estat de la xarxa.

  1. Instal·lació del plugin cordova-plugin-network-information

Per començar, necessitem instal·lar el plugin cordova-plugin-network-information, que ens permetrà accedir a la informació de la xarxa del dispositiu.

cordova plugin add cordova-plugin-network-information

  1. Detectar l'estat de la connexió a Internet

El plugin cordova-plugin-network-information proporciona una manera senzilla de detectar si el dispositiu està connectat a Internet.

Exemple de codi

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    var networkState = navigator.connection.type;

    if (networkState === Connection.NONE) {
        alert("No hi ha connexió a Internet.");
    } else {
        alert("Estàs connectat a Internet.");
    }
}

Explicació del codi

  1. document.addEventListener("deviceready", onDeviceReady, false);: Esperem que el dispositiu estigui llest abans d'executar el codi.
  2. navigator.connection.type: Obtenim el tipus de connexió de xarxa actual.
  3. if (networkState === Connection.NONE): Comprovem si no hi ha connexió a Internet.
  4. alert("No hi ha connexió a Internet.");: Mostrem un missatge si no hi ha connexió.
  5. alert("Estàs connectat a Internet.");: Mostrem un missatge si hi ha connexió.

  1. Identificar el tipus de connexió de xarxa

El plugin també ens permet identificar el tipus de connexió de xarxa, com ara Wi-Fi, 4G, 3G, etc.

Exemple de codi

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Connexió desconeguda';
    states[Connection.ETHERNET] = 'Connexió Ethernet';
    states[Connection.WIFI]     = 'Connexió WiFi';
    states[Connection.CELL_2G]  = 'Connexió 2G';
    states[Connection.CELL_3G]  = 'Connexió 3G';
    states[Connection.CELL_4G]  = 'Connexió 4G';
    states[Connection.CELL]     = 'Connexió cel·lular genèrica';
    states[Connection.NONE]     = 'Sense connexió';

    alert('Tipus de connexió: ' + states[networkState]);
}

Explicació del codi

  1. var states = {};: Creem un objecte per mapar els tipus de connexió a descripcions humanes.
  2. states[Connection.WIFI] = 'Connexió WiFi';: Assignem una descripció per a cada tipus de connexió.
  3. alert('Tipus de connexió: ' + states[networkState]);: Mostrem el tipus de connexió actual.

  1. Gestionar els canvis en l'estat de la xarxa

Podem escoltar els canvis en l'estat de la xarxa i respondre adequadament quan el dispositiu es connecta o desconnecta d'Internet.

Exemple de codi

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener("offline", onOffline, false);
    document.addEventListener("online", onOnline, false);
}

function onOffline() {
    alert("Has perdut la connexió a Internet.");
}

function onOnline() {
    alert("Has recuperat la connexió a Internet.");
}

Explicació del codi

  1. document.addEventListener("offline", onOffline, false);: Escoltem l'esdeveniment offline per detectar quan el dispositiu perd la connexió a Internet.
  2. document.addEventListener("online", onOnline, false);: Escoltem l'esdeveniment online per detectar quan el dispositiu recupera la connexió a Internet.
  3. function onOffline() { alert("Has perdut la connexió a Internet."); }: Mostrem un missatge quan el dispositiu perd la connexió.
  4. function onOnline() { alert("Has recuperat la connexió a Internet."); }: Mostrem un missatge quan el dispositiu recupera la connexió.

Exercicis pràctics

Exercici 1: Comprovar la connexió a Internet

Crea una aplicació Cordova que mostri un missatge indicant si el dispositiu està connectat a Internet o no quan l'aplicació s'inicia.

Solució

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    var networkState = navigator.connection.type;

    if (networkState === Connection.NONE) {
        alert("No hi ha connexió a Internet.");
    } else {
        alert("Estàs connectat a Internet.");
    }
}

Exercici 2: Mostrar el tipus de connexió

Modifica l'aplicació anterior per mostrar el tipus de connexió de xarxa (Wi-Fi, 4G, etc.) en lloc de només indicar si hi ha connexió o no.

Solució

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Connexió desconeguda';
    states[Connection.ETHERNET] = 'Connexió Ethernet';
    states[Connection.WIFI]     = 'Connexió WiFi';
    states[Connection.CELL_2G]  = 'Connexió 2G';
    states[Connection.CELL_3G]  = 'Connexió 3G';
    states[Connection.CELL_4G]  = 'Connexió 4G';
    states[Connection.CELL]     = 'Connexió cel·lular genèrica';
    states[Connection.NONE]     = 'Sense connexió';

    alert('Tipus de connexió: ' + states[networkState]);
}

Exercici 3: Gestionar els canvis en l'estat de la xarxa

Crea una aplicació Cordova que mostri un missatge quan el dispositiu es connecta o desconnecta d'Internet.

Solució

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener("offline", onOffline, false);
    document.addEventListener("online", onOnline, false);
}

function onOffline() {
    alert("Has perdut la connexió a Internet.");
}

function onOnline() {
    alert("Has recuperat la connexió a Internet.");
}

Resum

En aquest tema, hem après com gestionar la informació de la xarxa en aplicacions Cordova utilitzant el plugin cordova-plugin-network-information. Hem vist com detectar l'estat de la connexió a Internet, identificar el tipus de connexió i gestionar els canvis en l'estat de la xarxa. Aquests coneixements són essencials per crear aplicacions mòbils robustes que puguin gestionar adequadament la connectivitat de xarxa.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats