JavaScript Internet Connection Detection: Theory and Practice

Importance of Network Connection Status Detection

In modern web applications, real-time detection of network connection status is crucial for providing a good user experience. When network connections are interrupted, applications need to promptly notify users and implement appropriate degradation strategies, such as displaying offline prompts, enabling local caching, or pausing data synchronization operations.

Detailed Analysis of navigator.onLine Property

JavaScript provides the window.navigator.onLine property to detect the browser's network connection status. This property returns a boolean value, with true indicating online status and false indicating offline status. Here is a complete detection example:

// Initial status detection
console.log('Initial status: ' + (window.navigator.onLine ? 'online' : 'offline'));

// Listen for network status change events
window.addEventListener('online', () => {
    console.log('Network connection restored');
    // Execute reconnection operations
});

window.addEventListener('offline', () => {
    console.log('Network connection lost');
    // Execute offline handling operations
});

// Manual status check
function checkConnectionStatus() {
    const status = window.navigator.onLine ? 'online' : 'offline';
    console.log('Current connection status: ' + status);
    return status;
}

Browser Compatibility and Limitations

Although most modern browsers support the navigator.onLine property, its specific implementations vary:

In Chrome and Safari browsers, when the browser cannot connect to a local area network or router, navigator.onLine returns false; all other conditions return true. This means that when this property returns false, you can be certain the browser is offline, but when it returns true, it does not guarantee actual internet accessibility.

In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. Starting from Firefox 41, on OS X and Windows systems, this value follows actual network connectivity changes.

Supplementary Detection Methods

Due to the false positive issues with navigator.onLine, practical applications require combination with other detection methods:

XHR Request-Based Detection

Verify network connection status by sending actual HTTP requests:

function checkInternetConnection() {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.timeout = 5000; // Set timeout duration
        
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(true); // Connection normal
                } else {
                    resolve(false); // Connection abnormal
                }
            }
        };
        
        xhr.ontimeout = function() {
            resolve(false); // Timeout, connection abnormal
        };
        
        xhr.onerror = function() {
            resolve(false); // Error occurred, connection abnormal
        };
        
        // Request a reliable resource
        xhr.open('HEAD', '/api/health-check', true);
        xhr.send();
    });
}

// Usage example
checkInternetConnection().then(isConnected => {
    if (isConnected) {
        console.log('Internet connection normal');
    } else {
        console.log('Internet connection abnormal');
    }
});

Periodic Detection and State Management

Referencing network monitoring strategies in IoT devices, more intelligent connection status detection can be implemented:

class ConnectionMonitor {
    constructor() {
        this.failureCount = 0;
        this.maxFailures = 5;
        this.checkInterval = 30000; // Check every 30 seconds
        this.isMonitoring = false;
    }
    
    startMonitoring() {
        this.isMonitoring = true;
        this.monitorLoop();
    }
    
    stopMonitoring() {
        this.isMonitoring = false;
    }
    
    async monitorLoop() {
        while (this.isMonitoring) {
            const isConnected = await this.performConnectionCheck();
            
            if (isConnected) {
                this.failureCount = 0; // Reset failure count
                console.log('Connection normal');
            } else {
                this.failureCount++;
                console.log(`Connection failed, cumulative count: ${this.failureCount}`);
                
                if (this.failureCount >= this.maxFailures) {
                    this.handlePersistentFailure();
                }
            }
            
            await this.delay(this.checkInterval);
        }
    }
    
    async performConnectionCheck() {
        try {
            // Combine multiple detection methods
            const basicCheck = window.navigator.onLine;
            if (!basicCheck) return false;
            
            // Perform actual network request verification
            const response = await fetch('/api/health-check', {
                method: 'HEAD',
                cache: 'no-cache'
            });
            
            return response.ok;
        } catch (error) {
            return false;
        }
    }
    
    handlePersistentFailure() {
        console.log('Persistent connection failure detected, executing recovery operations');
        // Execute reconnection logic or notify user
        this.notifyUser('Network connection abnormal, attempting recovery...');
    }
    
    notifyUser(message) {
        // Display user notification
        const notification = document.createElement('div');
        notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #ff6b6b; color: white; padding: 10px; border-radius: 5px; z-index: 1000;';
        notification.textContent = message;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 5000);
    }
    
    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// Usage example
const monitor = new ConnectionMonitor();
monitor.startMonitoring();

Practical Application Scenarios

In practical applications of network status detection, multiple scenarios need consideration:

Progressive Web Applications (PWA): Combine with Service Worker to implement offline caching, automatically switching to offline mode when offline status is detected, providing services using cached data.

Real-time Applications: Such as chat applications, online games, etc., requiring real-time network status detection, pausing data transmission when connections break, and resynchronizing data when connections restore.

Data Synchronization Applications: Such as note applications, form applications, etc., saving data to local storage when offline, and automatically synchronizing to the server when online.

Best Practice Recommendations

1. Multi-layer Detection Strategy: Combine navigator.onLine with actual network request detection to improve detection accuracy.

2. Graceful Degradation: Provide clear user prompts and alternative solutions when offline status is detected.

3. State Persistence: Record network status change history for analysis and debugging.

4. Performance Considerations: Reasonably set detection frequency to avoid affecting application performance with overly frequent detection.

5. Error Handling: Provide comprehensive error handling mechanisms for various detection methods.

Conclusion

Network connection status detection in JavaScript is a complex but important topic. The navigator.onLine property provides basic detection capabilities, but due to browser implementation differences and false positive issues, practical applications require combination with other detection methods. By implementing multi-layer detection strategies, reasonable state management, and graceful error handling, more reliable network status detection systems can be built, providing better application experiences for users.