Alerta: Sin conexión a Internet!

Me pidieron implementar, en un sitio web (wordpress), la posibilidad de avisar al usuario cuando su conexión a internet se pierda.

Despues de una larga búsqueda, logre agrupar varios códigos en un archivo y otra parte en el archivo functions.php o ayudados de nuestro Plugin snippet, en mi caso Woody Snippets (¿Cómo uso Woody Snippets?).

¿Qué hace este código?

• Se usa navigator.onLine para detectar el estado de la conexión.
• Se agrega un div en la parte superior de la página con un mensaje de alerta si no hay conexión.
• Se elimina la alerta de sin conexión y se muestra una nueva alerta avisando que se reestableció la conexión.
• Se ejecuta al cargar la página y cuando cambie el estado de conexión.

Este método es ligero, no afecta el rendimiento de tu sitio y se verá algo así:

Manos al código!

Añadir el siguiente código en tu archivo functions.php de tu tema hijo o usamos el plugin Woody Snippets:

function enqueue_offline_alert_script() {
    wp_enqueue_script('offline-alert', get_stylesheet_directory_uri() . '/offline-alert.js', array(), time(), true);
}
add_action('wp_enqueue_scripts', 'enqueue_offline_alert_script');

Crea un nuevo archivo en tu tema hijo:
📂 wp-content/themes/tu-tema-hijo/offline-alert.js
(Si usas un tema padre con un tema hijo, asegúrate de poner el script en la carpeta correcta.)

Añade este código en el archivo offline-alert.js:

(function() {
    let estuvoDesconectado = false; // Variable para rastrear si se perdió la conexión

    function mostrarAlerta(mensaje, color) {
        let alertDiv = document.getElementById('offline-alert');

        if (!alertDiv) {
            alertDiv = document.createElement('div');
            alertDiv.id = 'offline-alert';
            alertDiv.style.position = 'fixed';
            alertDiv.style.top = '0';
            alertDiv.style.left = '0';
            alertDiv.style.width = '100%';
            alertDiv.style.textAlign = 'center';
            alertDiv.style.padding = '10px';
            alertDiv.style.zIndex = '10000';
            document.body.appendChild(alertDiv);
        }

        alertDiv.innerHTML = mensaje;
        alertDiv.style.backgroundColor = color;
        alertDiv.style.color = 'white';

        // Si es una alerta de reconexión, ocultarla después de 3 segundos
        if (color === 'green') {
            setTimeout(() => {
                if (alertDiv) {
                    alertDiv.remove();
                }
            }, 3000);
        }
    }

    function verificarConexion() {
        if (!navigator.onLine) {
            mostrarAlerta('⚠️ Sin conexión a Internet. Algunos elementos pueden no funcionar.', 'red');
            estuvoDesconectado = true; // Se marca que hubo una desconexión
        } else if (estuvoDesconectado) {
            mostrarAlerta('✅ Conexión restablecida.', 'green');
            estuvoDesconectado = false; // Se resetea la variable al reconectar
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        verificarConexion();
        window.addEventListener('online', verificarConexion);
        window.addEventListener('offline', verificarConexion);

        // Forzar la detección en dispositivos móviles cada 3 segundos
        setInterval(verificarConexion, 3000);
    });
})();

Luego, debes probar si funciona al desconectarnos de la Internet. La finalidad del código es alertar al usuario que se encuentra en sectores de mala cobertura y que se encuentre completando un formulario.