JavaScript Web APIs Guide

Web APIs extend JavaScript with powerful browser capabilities. Here's a guide to the most useful ones.

Fetch API#

// Basic fetch
const response = await fetch('/api/users');
const data = await response.json();

// POST request
const newUser = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
});

// With error handling
async function fetchData(url) {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  return response.json();
}

// AbortController for cancellation
const controller = new AbortController();

const fetchPromise = fetch('/api/data', {
  signal: controller.signal,
});

// Cancel after 5 seconds
setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetchPromise;
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Fetch aborted');
  }
}

Web Storage API#

// localStorage - persists across sessions
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Alice' }));
const user = JSON.parse(localStorage.getItem('user'));
localStorage.removeItem('user');
localStorage.clear();

// sessionStorage - cleared when tab closes
sessionStorage.setItem('tempData', 'value');
sessionStorage.getItem('tempData');

// Storage event (cross-tab communication)
window.addEventListener('storage', (event) => {
  console.log('Storage changed:', {
    key: event.key,
    oldValue: event.oldValue,
    newValue: event.newValue,
    url: event.url,
  });
});

// Wrapper with JSON handling
const storage = {
  get(key, defaultValue = null) {
    const item = localStorage.getItem(key);
    try {
      return item ? JSON.parse(item) : defaultValue;
    } catch {
      return item ?? defaultValue;
    }
  },

  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },

  remove(key) {
    localStorage.removeItem(key);
  },
};

Clipboard API#

// Write text to clipboard
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Copied to clipboard');
  } catch (error) {
    console.error('Failed to copy:', error);
  }
}

// Read text from clipboard
async function pasteText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted:', text);
    return text;
  } catch (error) {
    console.error('Failed to paste:', error);
  }
}

// Copy image to clipboard
async function copyImage(blob) {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        'image/png': blob,
      }),
    ]);
  } catch (error) {
    console.error('Failed to copy image:', error);
  }
}

// Read images from clipboard
async function pasteImage() {
  try {
    const items = await navigator.clipboard.read();

    for (const item of items) {
      if (item.types.includes('image/png')) {
        const blob = await item.getType('image/png');
        return URL.createObjectURL(blob);
      }
    }
  } catch (error) {
    console.error('Failed to read clipboard:', error);
  }
}

Geolocation API#

// Get current position
function getCurrentPosition() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('Geolocation not supported'));
      return;
    }

    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          accuracy: position.coords.accuracy,
        });
      },
      (error) => {
        reject(error);
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0,
      }
    );
  });
}

// Watch position changes
function watchPosition(callback) {
  const watchId = navigator.geolocation.watchPosition(
    (position) => {
      callback({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      });
    },
    (error) => {
      console.error('Position error:', error);
    },
    {
      enableHighAccuracy: true,
    }
  );

  // Return cleanup function
  return () => navigator.geolocation.clearWatch(watchId);
}

Notification API#

// Request permission
async function requestNotificationPermission() {
  if (!('Notification' in window)) {
    console.log('Notifications not supported');
    return false;
  }

  const permission = await Notification.requestPermission();
  return permission === 'granted';
}

// Show notification
function showNotification(title, options = {}) {
  if (Notification.permission !== 'granted') {
    console.log('Notification permission not granted');
    return;
  }

  const notification = new Notification(title, {
    body: options.body,
    icon: options.icon,
    tag: options.tag, // Replace existing with same tag
    requireInteraction: options.requireInteraction,
    data: options.data,
  });

  notification.onclick = (event) => {
    console.log('Notification clicked:', event);
    window.focus();
    notification.close();
  };

  notification.onclose = () => {
    console.log('Notification closed');
  };

  return notification;
}

// Usage
await requestNotificationPermission();
showNotification('New Message', {
  body: 'You have a new message from Alice',
  icon: '/icon.png',
});

Intersection Observer API#

// Lazy loading images
const imageObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        imageObserver.unobserve(img);
      }
    });
  },
  {
    rootMargin: '50px 0px', // Start loading 50px before visible
    threshold: 0.01,
  }
);

document.querySelectorAll('img.lazy').forEach((img) => {
  imageObserver.observe(img);
});

// Infinite scroll
const loadMoreObserver = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadMoreItems();
    }
  },
  { threshold: 1.0 }
);

loadMoreObserver.observe(document.querySelector('.load-more-trigger'));

// Animation on scroll
const animateObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in');
      }
    });
  },
  { threshold: 0.2 }
);

ResizeObserver API#

// Watch element size changes
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Element resized: ${width}x${height}`);

    // Responsive logic
    if (width < 600) {
      entry.target.classList.add('compact');
    } else {
      entry.target.classList.remove('compact');
    }
  }
});

resizeObserver.observe(document.querySelector('.container'));

// Cleanup
resizeObserver.disconnect();

// React hook example
function useElementSize(ref) {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!ref.current) return;

    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setSize({ width, height });
    });

    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref]);

  return size;
}

MutationObserver API#

// Watch DOM changes
const mutationObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('Children changed:', mutation.addedNodes, mutation.removedNodes);
    }
    if (mutation.type === 'attributes') {
      console.log('Attribute changed:', mutation.attributeName);
    }
  });
});

mutationObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class', 'data-state'],
});

// Cleanup
mutationObserver.disconnect();

// Wait for element to appear
function waitForElement(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const element = document.querySelector(selector);
    if (element) {
      resolve(element);
      return;
    }

    const observer = new MutationObserver(() => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        resolve(element);
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Element ${selector} not found`));
    }, timeout);
  });
}

Broadcast Channel API#

// Cross-tab communication
const channel = new BroadcastChannel('app_channel');

// Send message
channel.postMessage({
  type: 'USER_LOGGED_IN',
  user: { id: 1, name: 'Alice' },
});

// Receive messages
channel.onmessage = (event) => {
  console.log('Received:', event.data);

  if (event.data.type === 'USER_LOGGED_OUT') {
    // Handle logout in all tabs
    window.location.href = '/login';
  }
};

// Close channel
channel.close();

Web Workers#

// main.js
const worker = new Worker('worker.js');

// Send data to worker
worker.postMessage({ type: 'PROCESS', data: largeArray });

// Receive results
worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

worker.onerror = (error) => {
  console.error('Worker error:', error);
};

// Terminate worker
worker.terminate();

// worker.js
self.onmessage = (event) => {
  const { type, data } = event.data;

  if (type === 'PROCESS') {
    const result = heavyComputation(data);
    self.postMessage(result);
  }
};

function heavyComputation(data) {
  // CPU-intensive work
  return data.map(item => item * 2);
}

Performance API#

// Measure performance
performance.mark('start-task');

// Do something
await longRunningTask();

performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');

// Get measurements
const measures = performance.getEntriesByName('task-duration');
console.log(`Task took ${measures[0].duration}ms`);

// Navigation timing
const timing = performance.getEntriesByType('navigation')[0];
console.log({
  dnsLookup: timing.domainLookupEnd - timing.domainLookupStart,
  tcpConnect: timing.connectEnd - timing.connectStart,
  ttfb: timing.responseStart - timing.requestStart,
  domLoad: timing.domContentLoadedEventEnd - timing.responseEnd,
});

// Resource timing
const resources = performance.getEntriesByType('resource');
resources.forEach((resource) => {
  console.log(`${resource.name}: ${resource.duration}ms`);
});

Best Practices#

Error Handling:
✓ Always check API availability
✓ Handle permission denials
✓ Provide fallbacks
✓ Use try-catch with async APIs

Performance:
✓ Use observers over polling
✓ Disconnect observers when done
✓ Debounce frequent callbacks
✓ Use workers for heavy tasks

Security:
✓ Validate user input
✓ Handle CORS properly
✓ Be careful with clipboard
✓ Request minimal permissions

Compatibility:
✓ Check browser support
✓ Use feature detection
✓ Provide polyfills
✓ Test across browsers

Web APIs provide powerful browser capabilities. Use Fetch for network requests, Storage for persistence, Observers for efficient DOM watching, and Workers for heavy computation. Always check availability, handle errors gracefully, and clean up resources when done.