DEV Community

Philip Ifeanyi
Philip Ifeanyi

Posted on

The Web Platform Is More Powerful Than Most Developers Realize

#webdev #javascript #tutorial #frontend

10 Web APIs Every Frontend Developer Should Know (Part 0: Honorable Mentions)

Over the next 10 weeks, I'll be exploring browser APIs that can help you build faster, more capable web applications without reaching for another npm package.

If you've been building web applications for a while, you've probably installed a package to solve a problem and only later discovered that the browser already had a built-in solution.

Need to know when an element enters the viewport?

There's an API for that.

Need to react when an element changes size?

There's an API for that too.

Need to communicate between browser tabs, access the clipboard, monitor network status, or build offline experiences?

The browser can already help.

The modern web platform has evolved far beyond HTML, CSS, and JavaScript. Today's browsers expose a rich collection of APIs that allow developers to build faster, more responsive, and more capable applications without relying heavily on third-party libraries.

Yet many of these APIs remain underutilized.

Part of the inspiration for this series comes from the number of times I've spent hours searching npm for a solution, only to discover that the browser had already solved the problem and documented it on MDN.

Over the next 10 weeks, I'll be exploring Web APIs that can make everyday frontend development easier—from improving performance and user experience to building more resilient applications.

Before we begin, however, it's worth highlighting a few APIs that won't make the main list but are still worth knowing about.

APIs Every Developer Should Have on Their Radar

History API

Modern single-page applications wouldn't exist in their current form without the History API.

It allows applications to update the URL and browser history without triggering a full page refresh, making navigation feel seamless and instantaneous.

Most developers encounter it indirectly through routing libraries, but under the hood, it remains one of the foundational APIs of modern frontend development.

history.pushState(
  { page: 'dashboard' },
  '',
  '/dashboard'
);
Enter fullscreen mode Exit fullscreen mode

URL and URLSearchParams

I've lost count of how many codebases I've seen manually parsing URLs and query parameters.

Something like this:

const queryString = window.location.search.substring(1);

const params = queryString.split('&');

let page;
let sort;

params.forEach(param => {
  const [key, value] = param.split('=');

  if (key === 'page') {
    page = value;
  }

  if (key === 'sort') {
    sort = value;
  }
});

console.log(page, sort);
Enter fullscreen mode Exit fullscreen mode

At first glance, it works.

Until you start dealing with:

  • URL encoding (%20, %2F, etc.)
  • Missing parameters
  • Duplicate parameters
  • Edge cases and malformed URLs
  • Additional maintenance whenever requirements change

The browser already solves these problems for us.

const url = new URL(window.location.href);

const page = url.searchParams.get('page');
const sort = url.searchParams.get('sort');

console.log(page, sort);
Enter fullscreen mode Exit fullscreen mode

Need to add or update parameters?

const url = new URL(window.location.href);

url.searchParams.set('page', '2');
url.searchParams.set('sort', 'latest');

window.history.replaceState({}, '', url);
Enter fullscreen mode Exit fullscreen mode

Need all values for a repeated parameter?

// ?tag=react&tag=javascript&tag=webapi

const tags = url.searchParams.getAll('tag');

console.log(tags);
// ['react', 'javascript', 'webapi']
Enter fullscreen mode Exit fullscreen mode

The result is cleaner, easier to read, and far less likely to break when your URLs become more complex.

One of the best habits you can develop as a web developer is to stop treating URLs as strings and start treating them as structured data.

That's exactly what the URL and URLSearchParams APIs allow you to do.

Media Devices API

This API enables direct access to a user's camera and microphone, allowing developers to build features like the following:

  • Real-time video communication (video calls, conferencing apps)
  • Audio and video recording directly in the browser
  • Live streaming from user devices
  • Camera-based interactions such as QR code scanning or document capture 
const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});
Enter fullscreen mode Exit fullscreen mode

Because it interacts with sensitive hardware, it also requires careful handling of permissions, user privacy, and fallback behavior for unsupported or denied access states. It deserves a dedicated article of its own.

Broadcast Channel API

Ever wondered how some applications automatically log you out across every open tab?

The Broadcast Channel API makes that possible.

It allows tabs from the same website to communicate with each other without complicated workarounds.

const channel = new BroadcastChannel('app');

channel.postMessage('logout');
Enter fullscreen mode Exit fullscreen mode

It's not something you'll use every day, but when you need it, it's incredibly useful.

A common use case is synchronizing authentication state:

// Tab 1
channel.postMessage({
  type: 'LOGOUT'
});
Enter fullscreen mode Exit fullscreen mode 
// Tab 2
channel.onmessage = event => {
  if (event.data.type === 'LOGOUT') {
    window.location.href = '/login';
  }
};
Enter fullscreen mode Exit fullscreen mode

Web Workers and Service Workers

If there is one category of APIs that deserves far more attention than it gets, it's this one.

Web Workers

Web Workers allow JavaScript to perform expensive tasks without freezing the user interface.

Think:

  • Image processing
  • Large data transformations
  • Computationally expensive operations 
const worker = new Worker('worker.js');
Enter fullscreen mode Exit fullscreen mode

Service Workers enable:

  • Offline support
  • Advanced caching strategies
  • Background synchronization
  • Progressive Web App capabilities

These APIs are so significant that each could justify an entire series on its own.

WebAuthn

Passwords have been one of the weakest links in application security for decades.

WebAuthn offers a different future.

By enabling biometric authentication, hardware-backed credentials, and passkeys, it allows developers to build authentication experiences that are both more secure and more user-friendly.

This topic is too broad and too important to squeeze into this series, so I'll be covering it separately in the future.

Why These APIs Aren't in the Main Series

The purpose of this series isn't to cover every Web API.

That would be impossible.

Instead, I'm focusing on APIs that:

  • Solve common frontend problems
  • Deliver immediate practical value
  • Require minimal setup
  • Can be adopted incrementally in existing applications

In other words, APIs you can start using almost immediately.

What's Coming Next

Over the next 10 weeks, we'll explore:

  1. Intersection Observer API
  2. Resize Observer API
  3. Mutation Observer API
  4. Web Storage APIs
  5. Clipboard API
  6. Page Visibility API
  7. Web Share API
  8. Notifications API
  9. File System Access API
  10. Network Information & Online/Offline APIs

Each article will include:

  • Practical explanations
  • Real-world use cases
  • Browser support considerations
  • Copy-and-paste examples
  • Production tips and pitfalls

The goal isn't just to learn what these APIs do.

It's to understand when they can help you write less code, ship better experiences, and rely more on capabilities the browser already provides.

Next Up

Intersection Observer API — Let the Browser Watch Scroll Events

Follow along if you'd like to discover more browser capabilities that might already be solving problems in your application today.

Tags: #webdev #javascript #frontend #webapi #beginners

Top comments (0)