Browser Web APIs Reference
Essential browser APIs: Fetch, WebSocket, Service Workers, Web Storage, Geolocation, Canvas, WebGL, Notifications, Clipboard.
Browser Web APIs by category with their purpose, basic usage, support and related APIs: Fetch, WebSocket, service workers, Web Storage, IndexedDB, geolocation, Canvas, WebGL, notifications, clipboard, history and Intersection Observer.
Use it when
- You need the right browser API for a capability and a basic usage example.
- You are checking what a page can do without a library.
Watch out for
- Support and permission models vary by browser, and many APIs require a secure context and user consent.
- APIs change; confirm current status on MDN or a compatibility table.
The data
Apis
12 rows
| Name | Category | Purpose | Basic usage | Browser support | Related apis |
|---|---|---|---|---|---|
| Fetch API | networking | Modern promise-based interface for making HTTP requests, replacing XMLHttpRequest. | fetch(url).then(res => res.json()).then(data => console.log(data)); | All modern browsers (IE not supported) |
|
| WebSocket | networking | Full-duplex, persistent TCP connection for real-time bidirectional communication. | const ws = new WebSocket('wss://example.com'); ws.onmessage = e => console.log(e.data); | All modern browsers |
|
| Service Workers | offline | Background scripts that act as network proxies, enabling offline support, caching, and push notifications. | navigator.serviceWorker.register('/sw.js').then(reg => console.log('Registered')); | All modern browsers (IE no) |
|
| Web Storage (localStorage/sessionStorage) | storage | Simple key-value storage for small amounts of data, persisted across sessions (localStorage) or tab lifetime (sessionStorage). | localStorage.setItem('key', 'value'); const v = localStorage.getItem('key'); | All browsers including IE8+ |
|
| IndexedDB | storage | Low-level transactional database for storing large amounts of structured data (including files/blobs). | const db = await indexedDB.open('mydb', 1); db.onsuccess = e => { const store = e.target.result... } | All modern browsers |
|
| Geolocation API | hardware | Retrieve device's geographic location (latitude, longitude) with user permission. | navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords.latitude, pos.coords.longitude)); | All modern browsers (HTTPS required) |
|
| Canvas API | graphics | 2D drawing surface for rendering shapes, text, images, and animations via JavaScript. | const ctx = canvas.getContext('2d'); ctx.fillRect(10, 10, 100, 100); | All modern browsers (IE9+) |
|
| WebGL | graphics | JavaScript API for rendering 3D and 2D graphics using the GPU via OpenGL ES. | const gl = canvas.getContext('webgl2'); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); | All modern browsers (IE11 has WebGL 1) |
|
| Notifications API | notifications | Display system notifications to the user, even when the browser is not in focus. | Notification.requestPermission().then(p => { if (p === 'granted') new Notification('Hello!'); }); | All modern browsers (requires permission) |
|
| Clipboard API | utilities | Read from and write to the system clipboard (text, images, rich content) with user permission. | await navigator.clipboard.writeText('Copied!'); const text = await navigator.clipboard.readText(); | All modern browsers (HTTPS required) |
|
| History API | navigation | Manipulate browser session history (pushState, replaceState) for single-page app navigation without reloads. | history.pushState({page: 2}, 'Title 2', '/page2'); window.onpopstate = e => console.log(e.state); | All modern browsers (IE10+) |
|
| Intersection Observer | observer | Asynchronously observe changes in intersection of target element with ancestor or viewport. | const observer = new IntersectionObserver(entries => { entries.forEach(e => console.log(e.isIntersecting)); }); observer.observe(el); | All modern browsers (IE not) |
|
Fields
The shape of this dataset, read from the data itself: every column, its type and a real value. Agents can use this to plan a query without fetching the whole document.
| Section | Field | Type | Example |
|---|---|---|---|
| apis | name | string | Fetch API |
| apis | category | string | networking |
| apis | purpose | string | Modern promise-based interface for making HTTP … |
| apis | basic_usage | string | fetch(url).then(res => res.json()).then(data =>… |
| apis | browser_support | string | All modern browsers (IE not supported) |
| apis | related_apis | array | [4 items] |
Fetch the same bytes
The static files contain the same reference rows as the API, with no API rate limit. Live metadata, such as view counts, may differ. Use the API for content negotiation; use the static files for a cacheable snapshot.
curl "https://yjtoon.yunusemrevurgun.com/api/dataset/browser-web-apis-reference?format=toon"
const res = await fetch( "https://yjtoon.yunusemrevurgun.com/static-data/dataset/browser-web-apis-reference.toon" ); const toon = await res.text();
Rate limit: 120 requests per minute per IP, no key and no signup. API reference →