Current Status
Connection Test
Notification Settings
Actions
No connection events recorded yet. The history will populate as your connection status changes.
Connection Timeline
Connection data will be visualized here as events are recorded.
About Network Status Monitoring
This tool helps you monitor your network connection status in real-time using the browser's Network Information API and connection event listeners.
🌐 Real-time Monitoring
Continuously monitors your connection status and provides instant feedback when your network state changes.
📊 Connection Metrics
Displays detailed information about your connection including type, speed, and round-trip time when available.
🔔 Smart Notifications
Get notified when you go offline or come back online with customizable visual and audio alerts.
📈 Historical Data
Track your connection history and view statistics about uptime, disconnections, and connection quality over time.
Implementation Guide
Learn how to implement network status monitoring in your own applications:
Basic Network Status Detection
// Check current online status
if (navigator.onLine) {
console.log('Online');
} else {
console.log('Offline');
}
// Listen for network status changes
window.addEventListener('online', () => {
console.log('Connection restored');
});
window.addEventListener('offline', () => {
console.log('Connection lost');
});Advanced Connection Information
// Get connection information (if supported)
if ('connection' in navigator) {
const connection = navigator.connection;
console.log('Connection type:', connection.type);
console.log('Effective type:', connection.effectiveType);
console.log('Downlink:', connection.downlink, 'Mbps');
console.log('RTT:', connection.rtt, 'ms');
// Listen for connection changes
connection.addEventListener('change', () => {
console.log('Connection changed');
});
}Connection Testing
// Test connection with a ping
async function testConnection() {
try {
const start = Date.now();
const response = await fetch('/favicon.ico', {
method: 'HEAD',
cache: 'no-cache'
});
const latency = Date.now() - start;
if (response.ok) {
console.log('Connection OK, latency:', latency, 'ms');
return { status: 'online', latency };
}
} catch (error) {
console.log('Connection failed:', error);
return { status: 'offline', error };
}
}Use Cases
- Web Applications: Pause sync operations when offline, resume when online
- Progressive Web Apps: Show offline indicators and enable offline functionality
- Real-time Applications: Handle connection drops gracefully in chat or collaboration apps
- Media Streaming: Adjust quality based on connection speed and stability
- E-commerce: Prevent form submissions when offline to avoid data loss
Browser Support
The basic online/offline events are supported in all modern browsers. The Network Information API has limited support and is mainly available in Chrome-based browsers.