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'
);
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);
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);
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);
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']
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,
});
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');
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'
});
// Tab 2
channel.onmessage = event => {
if (event.data.type === 'LOGOUT') {
window.location.href = '/login';
}
};
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');
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:
- Intersection Observer API
- Resize Observer API
- Mutation Observer API
- Web Storage APIs
- Clipboard API
- Page Visibility API
- Web Share API
- Notifications API
- File System Access API
- 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