10 JavaScript Web APIs You’re Probably Not Using — But Should Be

10 JavaScript Web APIs You’re Probably Not Using — But Should Be

JavaScript is not just for DOM manipulation or AJAX calls anymore. Modern browsers expose a treasure trove of Web APIs that give developers access to advanced capabilities — many of which go unnoticed. Whether you’re a junior dev or a seasoned engineer, these APIs can elevate your web projects in ways you didn’t imagine.

1. Intersection Observer API

Use Case: Lazy loading images, infinite scrolling, analytics tracking.

Instead of listening to scroll events, you can observe when an element enters or exits the viewport.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Visible:', entry.target);
    }
  });
});

observer.observe(document.querySelector('.target'));

2. BroadcastChannel API

Use Case: Communicate between browser tabs.

const channel = new BroadcastChannel('chat');

channel.onmessage = (e) => console.log('Received:', e.data);
channel.postMessage('Hello from another tab!');

Perfect for multi-tab sync, logout propagation, or localStorage updates.

3. Clipboard API

Use Case: Copy/Paste content programmatically.

navigator.clipboard.writeText('Copied to clipboard!');
navigator.clipboard.readText().then(text => console.log(text));

Remember: it works only in HTTPS and requires user interaction in some cases.

4. Resize Observer API

Use Case: React to element size changes.

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Resized:', entry.contentRect);
  }
});

ro.observe(document.querySelector('.resizable'));

Ideal for responsive design, layout debugging, or custom component sizing.

5. Notification API

Use Case: Desktop/browser notifications.

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('Hello from JS!');
  }
});

Pro Tip: Combine with service workers for push notifications.

6. Performance API

Use Case: Measure load times, custom metrics.

const t0 = performance.now();
// Do something...
const t1 = performance.now();
console.log(`Took ${t1 - t0} milliseconds.`);

Dig deeper with performance.getEntriesByType('resource').

7. Page Visibility API

Use Case: Pause media or analytics when tab is hidden.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Page is hidden');
  } else {
    console.log('Page is visible');
  }
});

Great for saving CPU/battery and improving UX.

8. Web Share API

navigator.share({
  title: 'Check this out!',
  text: 'Here is something cool.',
  url: window.location.href
});

Currently best supported on mobile browsers.

9. Speech Synthesis API

Use Case: Text-to-speech.

const msg = new SpeechSynthesisUtterance('Hello, world!');
speechSynthesis.speak(msg);

Great for accessibility or educational apps.

10. DeviceOrientation & DeviceMotion APIs

Use Case: Tilt, shake, rotate detection on mobile.

window.addEventListener('deviceorientation', (e) => {
  console.log(`Alpha: ${e.alpha}, Beta: ${e.beta}, Gamma: ${e.gamma}`);
});

Build games, augmented reality apps, or shake-based triggers.

Final Thoughts

These lesser-known Web APIs open doors to advanced interactivity, better UX, and real-time communication in your apps. Try integrating a few in your next side project or production app.

Which of these have you used already? Which blew your mind?

Let me know in the comments or tag me with your demos!