api: YAML JSON TOON Database
version: 1.0.0
format: yaml
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: 7
  created_at: 1781275786
  updated_at: 1781275786
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