CÓMO DETECTAR CONEXIÓN A INTERNET CON JAVASCRIPT

November 16, 2025

Introducción a la Detección de Conexión en JavaScript

En el desarrollo de aplicaciones web modernas, garantizar que una aplicación pueda adaptarse a la disponibilidad de conexión a internet es fundamental. Las aplicaciones web, como las Progressive Web Apps (PWA), necesitan determinar si están conectadas a internet para ofrecer una experiencia de usuario óptima, ya sea cargando recursos en línea o mostrando contenido sin conexión. Este tutorial explora cómo detectar de manera confiable la conexión a internet utilizando JavaScript, centrándose en el uso del Fetch API y la programación asíncrona con Async/Await. También se analiza por qué soluciones tradicionales, como el uso de navigator.onLine, pueden no ser suficientes en ciertos contextos y cómo superar sus limitaciones. A través de ejemplos prácticos, se proporcionan técnicas para implementar una detección robusta que funcione en navegadores modernos al 13 de noviembre de 2025.

La detección de conexión a internet no solo mejora la experiencia del usuario, sino que también permite a los desarrolladores tomar decisiones informadas sobre cómo manejar recursos, como evitar la precarga de videos en conexiones lentas o mostrar mensajes personalizados cuando no hay conexión. Este tutorial está diseñado para desarrolladores que buscan una solución actualizada y confiable para integrar en sus proyectos web, con un enfoque en aplicaciones que dependen de datos externos.

Entendiendo navigator.onLine

Una de las formas más comunes de verificar la conexión a internet en JavaScript es utilizando la propiedad navigator.onLine. Esta propiedad, parte de la interfaz Navigator, devuelve un valor booleano: true si el navegador está en línea y false si está sin conexión. A primera vista, parece una solución simple y directa para determinar el estado de la conexión. Además, se puede combinar con eventos como online y offline para actualizar dinámicamente el estado de la conexión.

Implementación Básica de navigator.onLine

Para usar navigator.onLine, se puede agregar un event listener al evento load de la ventana para verificar el estado de la conexión cuando la página se carga. El siguiente ejemplo muestra cómo implementar esta funcionalidad:

window.addEventListener("load", (event) => {
    const statusDisplay = document.getElementById("status");
    statusDisplay.textContent = navigator.onLine ? "En línea" : "Sin conexión";
});

En este código, se accede a un elemento HTML con el id status y se actualiza su contenido con el estado de la conexión. La propiedad navigator.onLine devuelve true o false, y se usa un operador ternario para mostrar “En línea” o “Sin conexión”. Este enfoque es simple, pero solo se ejecuta al cargar la página.

Escuchando Cambios en la Conexión

Para que la aplicación responda a cambios en el estado de la conexión, se pueden agregar event listeners para los eventos online y offline. Estos eventos se disparan cuando el navegador detecta un cambio en la conectividad. El siguiente código muestra cómo implementar esta funcionalidad:

window.addEventListener("offline", (event) => {
    const statusDisplay = document.getElementById("status");
    statusDisplay.textContent = "Sin conexión";
});

window.addEventListener("online", (event) => {
    const statusDisplay = document.getElementById("status");
    statusDisplay.textContent = "En línea";
});

Con este código, cada vez que el navegador pierde o recupera la conexión, el elemento con id status se actualiza automáticamente. Para probar esta funcionalidad, los desarrolladores pueden usar las herramientas de desarrollo de Chrome, específicamente la pestaña “Application” y la sección “Service Workers”, donde se puede activar o desactivar la opción “Offline” para simular cambios en la conexión.

Limitaciones de navigator.onLine

Aunque navigator.onLine es ampliamente compatible en navegadores modernos, tiene limitaciones significativas que lo hacen poco confiable para aplicaciones que requieren una detección precisa de la conexión a internet. La principal limitación es que “en línea” no siempre significa que el navegador tiene acceso a internet. En muchos casos, navigator.onLine devuelve true si el dispositivo está conectado a una red local, como un router, incluso si esa red no tiene acceso a internet. Esto puede generar falsos positivos, lo que es problemático para aplicaciones que dependen de recursos externos.

Además, la implementación de navigator.onLine varía entre navegadores. Algunos navegadores pueden interpretar la conectividad de manera diferente, lo que lleva a resultados inconsistentes. Por ejemplo, un dispositivo conectado a una red Wi-Fi sin acceso a internet podría ser considerado “en línea” por algunos navegadores, mientras que otros podrían requerir una conexión activa a internet. Estas inconsistencias hacen que navigator.onLine no sea la mejor opción para aplicaciones críticas, como Progressive Web Apps, que necesitan saber con certeza si los datos externos están disponibles.

Usando Fetch API para una Detección Confiable

Dado que navigator.onLine no garantiza una detección precisa de la conexión a internet, una solución más robusta es utilizar el Fetch API para realizar una solicitud HTTP y verificar si se completa con éxito. El Fetch API, introducido como un reemplazo moderno de XMLHttpRequest, permite realizar solicitudes HTTP de manera sencilla y es compatible con promesas y la sintaxis Async/Await. Al intentar cargar un recurso pequeño, como una imagen de 1 píxel, se puede determinar si el navegador tiene acceso a internet según el resultado de la solicitud.

Creando la Función checkOnlineStatus

El enfoque consiste en crear una función asíncrona que realice una solicitud HTTP y devuelva true si la solicitud es exitosa (códigos de estado HTTP entre 200 y 299) o false si falla. El siguiente ejemplo muestra cómo implementar esta función, llamada checkOnlineStatus:

const checkOnlineStatus = async () => {
    try {
        const response = await fetch("/1pixel.png");
        return response.status >= 200 && response.status < 300;
    } catch (err) {
        return false;
    }
};

En este código, la función checkOnlineStatus utiliza el Fetch API para solicitar una imagen de 1 píxel (/1pixel.png). La solicitud se realiza dentro de un bloque try, y se espera el resultado con await. Si la solicitud es exitosa, se verifica que el código de estado esté entre 200 y 299, devolviendo true. Si la solicitud falla, el bloque catch captura el error y devuelve false, indicando que el navegador está sin conexión. Es importante asegurarse de que la imagen solicitada no esté almacenada en caché por un service worker, ya que esto podría generar un falso positivo.

Actualizando el Estado de Conexión en Intervalos

Para mantener el estado de conexión actualizado, se puede usar setInterval para ejecutar la función checkOnlineStatus periódicamente. El siguiente código muestra cómo implementar esta funcionalidad, actualizando un elemento HTML cada 30 segundos:

setInterval(async () => {
    const result = await checkOnlineStatus();
    const statusDisplay = document.getElementById("status");
    statusDisplay.textContent = result ? "En línea" : "Sin conexión";
}, 30000);

En este ejemplo, setInterval ejecuta una función asíncrona cada 30 segundos (30000 milisegundos). La función llama a checkOnlineStatus y actualiza el elemento con id status según el resultado. Aunque para pruebas se podría usar un intervalo más corto, como 3 segundos, un intervalo de 30 segundos es más adecuado para aplicaciones reales, ya que reduce la carga en el servidor y el consumo de recursos.

Verificación al Cargar la Página

Para aplicaciones como Progressive Web Apps, es útil verificar el estado de la conexión al cargar la página, especialmente si un service worker permite que la aplicación funcione sin conexión. El siguiente código muestra cómo agregar un event listener para el evento load que utiliza checkOnlineStatus:

window.addEventListener("load", async (event) => {
    const statusDisplay = document.getElementById("status");
    statusDisplay.textContent = (await checkOnlineStatus())
        ? "En línea"
        : "Sin conexión";
});

Este código asegura que el estado de la conexión se muestre inmediatamente después de que la página se carga, proporcionando una experiencia consistente para los usuarios.

Mejores Prácticas para Detecciones Críticas

Aunque el uso de setInterval es útil para mostrar el estado de conexión en la interfaz, no es recomendable depender de un estado verificado hace 20 o 30 segundos para realizar solicitudes críticas de datos. En su lugar, se debe llamar a checkOnlineStatus justo antes de realizar una solicitud importante. El siguiente ejemplo muestra cómo implementar esta práctica:

const fetchData = async () => {
    const online = await checkOnlineStatus();
    if (online) {
        try {
            const response = await fetch("https://api.example.com/data");
            const data = await response.json();
            console.log("Datos obtenidos:", data);
        } catch (err) {
            console.error("Error al obtener datos:", err);
        }
    } else {
        console.log("Sin conexión, no se puede realizar la solicitud.");
    }
};

En este código, la función fetchData verifica el estado de la conexión antes de realizar una solicitud a una API. Si checkOnlineStatus devuelve true, se procede con la solicitud; de lo contrario, se maneja el caso sin conexión, como mostrar un mensaje al usuario. Esta práctica asegura que la aplicación no intente realizar solicitudes cuando no hay conexión, mejorando la robustez y la experiencia del usuario.

Consideraciones Adicionales

Al implementar la detección de conexión con el Fetch API, hay varios factores a tener en cuenta para garantizar un comportamiento óptimo:

Evitar caché de service workers: Si la aplicación utiliza un service worker, asegúrate de que el recurso solicitado en checkOnlineStatus (como /1pixel.png) no esté almacenado en caché. Una solicitud en caché podría devolver un resultado exitoso incluso sin conexión a internet.
Tiempo de espera (timeout): En redes lentas, las solicitudes pueden tardar en fallar. Para evitar esperas prolongadas, se puede configurar un tiempo de espera usando AbortController. El siguiente ejemplo muestra cómo implementarlo:

const checkOnlineStatus = async () => {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
        const response = await fetch("/1pixel.png", {
            signal: controller.signal,
        });
        clearTimeout(timeoutId);
        return response.status >= 200 && response.status < 300;
    } catch (err) {
        clearTimeout(timeoutId);
        return false;
    }
};

Este código aborta la solicitud después de 5 segundos, asegurando que la función no se bloquee en redes inestables.

Frecuencia de verificación: Aunque un intervalo de 30 segundos es razonable para mostrar el estado de conexión, aplicaciones críticas pueden requerir intervalos más cortos o verificaciones bajo demanda. Evalúa las necesidades de tu aplicación para encontrar el balance adecuado.
Compatibilidad con navegadores: El Fetch API y Async/Await son compatibles con todos los navegadores modernos al 13 de noviembre de 2025, incluyendo Chrome, Firefox, Safari y Edge. Sin embargo, para navegadores más antiguos, considera usar un polyfill para el Fetch API.

Conclusiones

Detectar la conexión a internet en aplicaciones web es una tarea esencial para garantizar una experiencia de usuario fluida y confiable. Aunque la propiedad navigator.onLine ofrece una solución simple, sus limitaciones, como la incapacidad de distinguir entre una red local y una conexión a internet, la hacen poco adecuada para aplicaciones críticas. En cambio, el uso del Fetch API junto con Async/Await proporciona una solución robusta que verifica activamente la conectividad mediante solicitudes HTTP. Al implementar funciones como checkOnlineStatus y combinarlas con verificaciones en tiempo real antes de solicitudes críticas, los desarrolladores pueden crear aplicaciones que se adaptan dinámicamente a los cambios en la conectividad. Con prácticas adicionales, como manejar tiempos de espera y evitar caché de service workers, esta solución es ideal para aplicaciones modernas, incluidas Progressive Web Apps, en el entorno web de 2025.