api: "YAML JSON TOON Database"
version: "1.0.0"
format: "json"
dataset:
  id: 33
  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: 0
  created_at: 1777673262
  updated_at: 1777673262
data:
  apis:
    - 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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "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:
        - "ResizeObserver"
        - "MutationObserver"