Aprende a verificar si hay una conexión a Internet en electron.

Cómo comprobar si hay una conexión a Internet disponible en Electron Framework

Si su proyecto proporciona autenticación con un servidor o recupera recursos de la web, es posible que desee implementar un método para verificar si el usuario está en línea o no.

Sin biblioteca

No necesita ninguna biblioteca para verificar una conexión a Internet activa en electron, ya que simplemente puede usar la propiedad onLine de la variable del navegador en la ventana.

function isOnline(){
    return navigator.onLine;
}

Realmente simple y funcional, ¿no? ¡Pero podemos hacerlo mejor!

Embellezca la función con cuadros de diálogo y una "función de reintento" que se ejecutará solo si hay una conexión activa:

function isOnline(user_callback){
    /**
      * Mostrar una advertencia al usuario.
      * Puede volver a intentar en el cuadro de diálogo hasta que una conexión a Internet
      * está activo.
     */
    var message = function(){
        const {dialog} = require('electron').remote;

        return dialog.showMessageBox({
            title:"No hay internet",
            message:"No hay Internet disponible, ¿quieres volver a intentarlo?",
            type:'warning',
            buttons:["Try again please","I don't want to work anyway"],
            defaultId: 0
        },function(index){
            // if clicked "Try again please"
            if(index == 0){
                execute();
            }
        })
    };

    var execute = function(){
        if(navigator.onLine){
            // Execute action if internet available.
            user_callback();
        }else{
            // Show warning to user
            // And "retry" to connect
            message();
        }
    };

    // Verificar por primera vez
    execute();
}

// Úselo, la alerta ("Hola mundo"); se ejecutará solo si hay una conexión a Internet activa.
isOnline(function(){
    alert("Hola mundo!");
});

No internet connection

Gracias al módulo de diálogo, su aplicación se verá bien al mismo tiempo que es funcional.

Sin embargo, hay algunos casos en los que, según sus condiciones, el navigator.onLine puede fallar, pero ¿por qué? Para comprender correctamente por qué podría suceder esto, debe saber de acuerdo con esta propiedad qué significa estar en línea.

¿Qué significa realmente en línea?

Parece haber cierta confusión en torno a lo que significa estar "en línea". Tenga en cuenta que Internet es un grupo de redes, sin embargo, a veces está en una VPN, sin acceso a Internet "en general" o la red mundial. A menudo, las empresas tienen sus propias redes que tienen una conectividad limitada a otras redes externas, por lo que podría considerarse "en línea".

Estar en línea de acuerdo con la propiedad solo implica que esté conectado a una red, no la disponibilidad ni la accesibilidad de los servicios a los que está tratando de conectarse .

Si no puede usar navigator.onLine porque está en una VPN, es decir, deberá realizar una solicitud a alguna URL y, de acuerdo con el resultado (código) de la solicitud, proporcione un estado.

Con una biblioteca

Si desea brindar una mejor experiencia de usuario, puede usar una biblioteca que maneje el proceso por usted. 

Offline.js

Offline.js es una biblioteca que alerta automáticamente a sus usuarios cuando pierden la conexión a Internet. Captura las solicitudes AJAX que se realizaron mientras la conexión estaba inactiva y las rehace cuando se realiza una copia de seguridad, por lo que su aplicación reacciona perfectamente.

Tiene varios temas hermosos y no requiere configuración.

Incluya el javascript, uno de los temas y uno de los idiomas en su sitio y ¡listo! Para usar solo la API de JavaScript sin un indicador de IU, simplemente omita el archivo CSS.

Si desea echar un vistazo a cómo se ve en su sitio, desconecte su Internet o pruebe el simulador en la página de inicio. Visite el repositorio de la biblioteca en Github aquí .

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores