Web API Intro
Web APIs are built-in browser interfaces exposed to JavaScript. They cover everything from networking and storage to graphics, audio, and the camera.
The most-used Web APIs
| API | What it does |
|---|---|
| DOM | Read and change the page. |
| Fetch | HTTP requests (replaces XMLHttpRequest). |
| Web Storage | localStorage, sessionStorage. |
| IndexedDB | Larger structured client-side database. |
| Geolocation | Read the device's coordinates. |
| Web Workers | Run JS off the main thread. |
| Service Workers | Offline, caching, push notifications. |
| WebSocket | Persistent, two-way connections. |
| WebRTC | Peer-to-peer audio/video/data. |
| Canvas / WebGL / WebGPU | 2D / 3D graphics. |
| Web Audio | Synthesize and process audio. |
| Notifications / Push | OS-level alerts. |
| Intersection / Resize / Mutation Observer | React to layout and DOM changes. |
Detecting support
JS
if ("clipboard" in navigator) { /* … */ }
if (typeof IntersectionObserver !== "undefined") { /* … */ }
if ("serviceWorker" in navigator) { /* register SW */ }
Permissions
Sensitive APIs (camera, microphone, location, notifications) require explicit user consent. The Permissions API lets you check current state without prompting:
JS
const status = await navigator.permissions.query({ name: "geolocation" });
status.state; // "granted" | "denied" | "prompt"
Tip: Bookmark MDN's Web API index. Hundreds of APIs exist — feature-detect before reaching for the ones outside the every-day list.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from Web API Intro!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Check permission state for geolocation without prompting.
const s = await navigator.
.query({ name: 'geolocation' });
Eleven letters — plural.
Discussion
Loading…