Contents

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

AreaAPIs
PageDOM, MutationObserver, IntersectionObserver, ResizeObserver
NetworkFetch, WebSocket, Server-Sent Events
NavigationHistory API, location
StoragelocalStorage, IndexedDB, cookies
Deviceclipboard, geolocation, camera and microphone, notifications, vibration
BackgroundService Workers, Web Workers
Media and graphicsCanvas, Web Audio, WebGL, WebRTC
UtilitiesURL, 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 await and 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.