Browser Web APIs Reference
Essential browser APIs: Fetch, WebSocket, Service Workers, Web Storage, Geolocation, Canvas, WebGL, Notifications, Clipboard.
The data
Apis
| 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) |
|
Fetch the same bytes
The static files are identical to what the API returns, but with no rate limit and no server round trip. Use the API when you want a query and a content type; use the files when you want to cache one document.
curl "https://yjtoon.com/api/dataset/browser-web-apis-reference?format=toon"
const res = await fetch( "https://yjtoon.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 →