api: "YAML JSON TOON Database"
version: 1.0.0
format: toon
dataset:
  id: 349
  slug: browser-web-apis-reference
  title: "Browser Web APIs Reference"
  description: "Essential browser APIs: Fetch, WebSocket, Service Workers, Web Storage, Geolocation, Canvas, WebGL, Notifications, Clipboard."
  category: "Web Technologies"
  category_slug: web-technologies
  tags: "javascript,browser,api,websocket,fetch,service-worker,webgl"
  view_count: 4
  created_at: 1781275786
  updated_at: 1781275786
data:
  apis
    [12]{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)",["XMLHttpRequest","Request","Response","Headers"]
      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",["WebSocketServer (Node.js)","Server-Sent Events"]
      "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)",["Cache API","Push API","Background Sync","Notification"]
      "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","Cache API","Cookies"]
      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",["Web Storage","Cache API","File API"]
      "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)",["Geolocation API (W3C)","DeviceOrientation API"]
      "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","CanvasRenderingContext2D","OffscreenCanvas"]
      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)",["WebGL2","WebGPU (next-gen)","Three.js (library)"]
      "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)",["Push API","Service Workers"]
      "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)",["ExecCommand (legacy)","ClipboardEvent"]
      "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+)",["Location","Window.location"]
      "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)",["ResizeObserver","MutationObserver"]