{
    "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"]
            }
        ]
    }
}