api: YAML JSON TOON Database
version: 1.0.0
format: yaml
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:
    - 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:
    - 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:
    - web-api-standards
    - javascript-es6-features
    - http-cors-guide
    - css-layout-systems
  entry_count: 12
  fields:
    - section: apis
      field: name
      type: string
      example: Fetch API
    - section: apis
      field: category
      type: string
      example: networking
    - section: apis
      field: purpose
      type: string
      example: Modern promise-based interface for making HTTP …
    - section: apis
      field: basic_usage
      type: string
      example: fetch(url).then(res => res.json()).then(data =>…
    - section: apis
      field: browser_support
      type: string
      example: All modern browsers (IE not supported)
    - section: apis
      field: related_apis
      type: array
      example: "[4 items]"
  category: Web Technologies
  category_slug: web-technologies
  tags: javascript,browser,api,websocket,fetch,service-worker,webgl
  view_count: 37
  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