api: YAML JSON TOON Database
version: 1.0.0
format: toon
dataset:
  id: 2739
  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."
  summary: "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_when[2]: 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.
  caveats[2]: "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.
  related[4]: web-api-standards,javascript-es6-features,http-cors-guide,css-layout-systems
  entry_count: 12
  fields[6]{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]"
  category: Web Technologies
  category_slug: web-technologies
  tags: "javascript,browser,api,websocket,fetch,service-worker,webgl"
  view_count: 40
  created_at: 1777673262
  updated_at: 1777673262
data:
  apis[12]:
    - name: Fetch API
      category: networking
      purpose: "Modern promise-based interface for making HTTP requests, replacing XMLHttpRequest."
      basic_usage: fetch(url).then(res => res.json()).then(data => console.log(data));
      browser_support: All modern browsers (IE not supported)
      related_apis[4]: XMLHttpRequest,Request,Response,Headers
    - name: WebSocket
      category: networking
      purpose: "Full-duplex, persistent TCP connection for real-time bidirectional communication."
      basic_usage: "const ws = new WebSocket('wss://example.com'); ws.onmessage = e => console.log(e.data);"
      browser_support: All modern browsers
      related_apis[2]: WebSocketServer (Node.js),Server-Sent Events
    - name: Service Workers
      category: offline
      purpose: "Background scripts that act as network proxies, enabling offline support, caching, and push notifications."
      basic_usage: navigator.serviceWorker.register('/sw.js').then(reg => console.log('Registered'));
      browser_support: All modern browsers (IE no)
      related_apis[4]: Cache API,Push API,Background Sync,Notification
    - name: Web Storage (localStorage/sessionStorage)
      category: storage
      purpose: "Simple key-value storage for small amounts of data, persisted across sessions (localStorage) or tab lifetime (sessionStorage)."
      basic_usage: "localStorage.setItem('key', 'value'); const v = localStorage.getItem('key');"
      browser_support: All browsers including IE8+
      related_apis[3]: IndexedDB,Cache API,Cookies
    - name: IndexedDB
      category: storage
      purpose: Low-level transactional database for storing large amounts of structured data (including files/blobs).
      basic_usage: "const db = await indexedDB.open('mydb', 1); db.onsuccess = e => { const store = e.target.result... }"
      browser_support: All modern browsers
      related_apis[3]: Web Storage,Cache API,File API
    - name: Geolocation API
      category: hardware
      purpose: "Retrieve device's geographic location (latitude, longitude) with user permission."
      basic_usage: "navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords.latitude, pos.coords.longitude));"
      browser_support: All modern browsers (HTTPS required)
      related_apis[2]: Geolocation API (W3C),DeviceOrientation API
    - name: Canvas API
      category: graphics
      purpose: "2D drawing surface for rendering shapes, text, images, and animations via JavaScript."
      basic_usage: "const ctx = canvas.getContext('2d'); ctx.fillRect(10, 10, 100, 100);"
      browser_support: All modern browsers (IE9+)
      related_apis[3]: WebGL,CanvasRenderingContext2D,OffscreenCanvas
    - name: WebGL
      category: graphics
      purpose: JavaScript API for rendering 3D and 2D graphics using the GPU via OpenGL ES.
      basic_usage: "const gl = canvas.getContext('webgl2'); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT);"
      browser_support: All modern browsers (IE11 has WebGL 1)
      related_apis[3]: WebGL2,WebGPU (next-gen),Three.js (library)
    - name: Notifications API
      category: notifications
      purpose: "Display system notifications to the user, even when the browser is not in focus."
      basic_usage: "Notification.requestPermission().then(p => { if (p === 'granted') new Notification('Hello!'); });"
      browser_support: All modern browsers (requires permission)
      related_apis[2]: Push API,Service Workers
    - name: Clipboard API
      category: utilities
      purpose: "Read from and write to the system clipboard (text, images, rich content) with user permission."
      basic_usage: await navigator.clipboard.writeText('Copied!'); const text = await navigator.clipboard.readText();
      browser_support: All modern browsers (HTTPS required)
      related_apis[2]: ExecCommand (legacy),ClipboardEvent
    - name: History API
      category: navigation
      purpose: "Manipulate browser session history (pushState, replaceState) for single-page app navigation without reloads."
      basic_usage: "history.pushState({page: 2}, 'Title 2', '/page2'); window.onpopstate = e => console.log(e.state);"
      browser_support: All modern browsers (IE10+)
      related_apis[2]: Location,Window.location
    - name: Intersection Observer
      category: observer
      purpose: Asynchronously observe changes in intersection of target element with ancestor or viewport.
      basic_usage: "const observer = new IntersectionObserver(entries => { entries.forEach(e => console.log(e.isIntersecting)); }); observer.observe(el);"
      browser_support: All modern browsers (IE not)
      related_apis[2]: ResizeObserver,MutationObserver