Network Information API

// Get connection information
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  // Connection type (e.g., 'wifi', 'cellular', '4g')
  console.log('Type:', connection.effectiveType);
  
  // Downlink speed in Mbps
  console.log('Speed:', connection.downlink + ' Mbps');
  
  // Round-trip time in milliseconds
  console.log('RTT:', connection.rtt + ' ms');
  
  // Data saver mode enabled?
  console.log('Save Data:', connection.saveData);
  
} else {
  console.log('Network Information API not supported');
}

// effectiveType values:
// - 'slow-2g' - Very slow
// - '2g' - Slow
// - '3g' - Medium
// - '4g' - Fast

// 🎯 Use to optimize content delivery

// Load images based on connection speed
function loadImage() {
  const connection = navigator.connection;
  const img = document.getElementById('hero-image');
  
  if (!connection) {
    // No API support - load normal image
    img.src = 'hero-normal.jpg';
    return;
  }
  
  // Check connection type
  if (connection.saveData) {
    // User enabled data saver
    img.src = 'hero-low.jpg';
    console.log('Loading low-quality image (data saver on)');
    
  } else if (connection.effectiveType === '4g') {
    // Fast connection - load high quality
    img.src = 'hero-high.jpg';
    console.log('Loading high-quality image');
    
  } else if (connection.effectiveType === '3g') {
    // Medium connection - load normal
    img.src = 'hero-normal.jpg';
    console.log('Loading normal-quality image');
    
  } else {
    // Slow connection - load low quality
    img.src = 'hero-low.jpg';
    console.log('Loading low-quality image (slow connection)');
  }
}

loadImage();

// Listen for connection changes
navigator.connection?.addEventListener('change', () => {
  console.log('Connection changed:', navigator.connection.effectiveType);
  loadImage(); // Reload with appropriate quality
});

// 🎯 Better UX on slow connections!