Frontend Development › JavaScript & TypeScript
Web APIs
The browser's built-in APIs: clipboard, geolocation, notifications and more.
Also known as: browser APIs, Web API, Web Platform APIs
Web APIs are the features a browser provides to JavaScript, beyond the language itself. They aren’t part of ECMAScript. They come from the browser (and some also exist in Node or other runtimes).
// Examples, none of which are "JavaScript the language"
document.querySelector("h1"); // DOM
await fetch("/api/orders"); // network
localStorage.setItem("theme", "dark"); // storage
navigator.clipboard.writeText("copied"); // clipboard
navigator.geolocation.getCurrentPosition(onPosition); // location
setTimeout(() => {}, 1000); // timers
Groups worth knowing
| Area | APIs |
|---|---|
| Page | DOM, MutationObserver, IntersectionObserver, ResizeObserver |
| Network | Fetch, WebSocket, Server-Sent Events |
| Navigation | History API, location |
| Storage | localStorage, IndexedDB, cookies |
| Device | clipboard, geolocation, camera and microphone, notifications, vibration |
| Background | Service Workers, Web Workers |
| Media and graphics | Canvas, Web Audio, WebGL, WebRTC |
| Utilities | URL, structuredClone, crypto.getRandomValues, AbortController |
Practical rules
- Check support before relying on one (browser compatibility). Use feature detection:
if ("clipboard" in navigator). - Many need permission. Location, notifications, camera and clipboard reads ask the user, who can say no. Handle denial gracefully.
- Many need HTTPS (secure contexts only).
- Most are asynchronous and return promises, so use
awaitand handle errors. - Ask at the right moment, after a user action, not on page load. Browsers may block unprompted requests.
- Privacy: collect only what you need.
- MDN is the reference for each API.