BROWSER API LIBRARY · 38 DEMOS
43 APIs
--:--:--
BROWSER API LIBRARY
43 MODERNE WEB-APIS · LIVE DEMOS · KATEGORISIERT · BUGFIXED
43 DEMOS
7 KATEGORIEN
19 FULL LABS
24 MINI / NEUE DEMOS
4 BUGS FIXED
⟷ KOMMUNIKATION
📡
BroadcastChannel API
W3C · Alle modernen Browser · Baseline 2022
Sendet Nachrichten und Mausbewegungen in Echtzeit zwischen allen offenen Tabs derselben Origin — ohne Server, ohne Polling.
LAB + QUIZ CROSS-TAB MOUSE SYNC
🔗
WebRTC — P2P Chat
W3C · Vollständig unterstützt · XSS Fix ✓
Serverless Peer-to-Peer-Chat zwischen zwei Browser-Tabs via RTCPeerConnection und DataChannel. SDP-Offer/Answer per Copy-Paste — kein Signaling-Server nötig.
LAB + QUIZ P2P DATACHANNEL SDP
WebTransport / HTTP3
IETF QUIC · Chrome 97+ · Exp. in Firefox
Bidirektionale Streams über QUIC/UDP — schneller als WebSocket durch Head-of-Line-Blocking-Eliminierung. Verbindet sich mit echo.webtransport.day Testserver.
LAB + QUIZ EXPERIMENTAL QUIC / UDP HTTPS
🔌
Web Serial API
WICG · Chrome 89+ · HTTPS required
Serielle Verbindung zu Arduino/Microcontroller direkt aus dem Browser. Liest Byte-Streams, sendet Text-Commands mit 9600 Baud. Volles Reader/Writer-Lock-Pattern.
LAB + QUIZ HARDWARE HTTPS STREAMS
📶
Web Bluetooth BLE
WICG · Chrome 56+ · HTTPS required
Scannt nach BLE-Geräten und verbindet sich über den nativen Browser-Picker. Zeigt Gerätename und ID — Einstieg in GATT-Characteristic-Reads.
MINI DEMO HARDWARE HTTPS EXPERIMENTAL
📋
Clipboard API
W3C · Chrome 76+ · writeText / read
Liest und schreibt Text, HTML und Bilder direkt in die Systemzwischenablage via navigator.clipboard — asynchron, permission-gesichert, kein execCommand-Hack mehr nötig.
LAB + QUIZ HTTPS CLIPBOARDITEM HTML + BILDER
🔌
WebSocket — Bidirektional
W3C · Alle Browser · echo.websocket.org
Vollduplex TCP-Verbindung mit Echo-Server. Zeigt readyState-Lifecycle, RTT-Messung, Sent/Received-Counter. Basis für alle Echtzeit-Anwendungen: Chat, Trading-Feed, Multiplayer.
LAB + QUIZ SERVER PUSH RTT MESSUNG WSS
🌐
Network Connectivity + RTT
Network Info API · navigator.connection
Echte Konnektivitätsmessung via HEAD-Fetch an externem Endpunkt — ignoriert das unzuverlässige navigator.onLine und misst echte Round-Trip-Time in ms.
LAB + QUIZ LATENCY FETCH
⚡ COMPUTE & GRAFIK
🎮
WebGPU Compute Shader
W3C · Chrome 113+ · WGSL Shader Language
WGSL-Shader quadriert ein Array komplett auf der GPU. Vollständige Pipeline: Buffer → BindGroup → Dispatch → Staging → mapAsync. Schneller als JS für massiv-parallele Ops.
LAB + QUIZ GPU EXPERIMENTAL HTTPS
⚙️
WebAssembly — Factorial
W3C · Alle Browser · Raw Bytecode
Kompiliert hand-crafted WASM-Bytecode (Uint8Array) zur Laufzeit und ruft eine rekursive Fakultäts-Funktion auf. Misst Ausführungszeit via performance.now().
LAB + QUIZ BYTECODE BENCHMARK
✖️
WebAssembly — Multiply
W3C · Alle Browser · Live Input
Minimaler WASM-Kern: i32-Multiply aus raw Bytecode instantiiert und live mit Eingabefeldern aufgerufen. Perfektes Referenz-Pattern für WASM Function Exports.
MINI DEMO WASM EXPORT LIVE INPUT
🥽
WebXR Device API
W3C · Chrome 79+ · XRReferenceSpace Fix ✓
Prüft immersive-vr Support, startet XR-Session mit korrektem requestReferenceSpace('local'), WebGL-Layer-Setup und 90Hz Frame-Loop. Fallback WebGL-Animation ohne Headset.
LAB + QUIZ GPU HARDWARE HTTPS
🎵
AudioWorklet Synthesizer
Web Audio API · Chrome 66+ · Deadcode Fix ✓
Echtzeit-Sägezahnwellen-Synthese im dedizierten Audio-Thread (AudioWorkletProcessor). Blob-URL-Trick für inline Worklet-Code. 6 Synth-Pads mit Frequency-Parameter-Automation.
LAB + QUIZ AUDIO THREAD BLOB URL
⚛️
SharedArrayBuffer + Atomics
ECMAScript · COOP/COEP Headers required
Lock-free gemeinsamer Speicher zwischen Main-Thread und Web Worker via Atomics.add. Spiegelt Worker-Counter live via RAF. COOP/COEP Header-Hinweise inklusive.
LAB + QUIZ EXPERIMENTAL HTTPS CONCURRENCY
🔑 SICHERHEIT
🔐
Web Crypto — RSA-OAEP
W3C SubtleCrypto · Alle Browser · HTTPS
Vollständiger Encrypt/Decrypt-Zyklus: RSA-OAEP KeyPair generieren → Plaintext mit Public Key verschlüsseln → Private Key entschlüsselt. Keys nicht-exportierbar.
LAB + QUIZ HTTPS ASYMMETRIC BASE64
🪪
WebAuthn / Passkeys
W3C FIDO2 · Alle Browser · HTTPS
Passwortlose Biometrie-Registrierung und Login via TouchID/FaceID/PIN. navigator.credentials.create + .get. Platform-Authenticator-Check inklusive.
LAB + QUIZ HTTPS HARDWARE PASSKEYS
🔒
Secure Context Check
window.isSecureContext · Alle Browser
Prüft ob die Seite in einem Secure Context (HTTPS/localhost) läuft und zeigt welche mächtigen APIs damit freigeschaltet sind — als visuelles Prerequisites-Dashboard.
MINI DEMO FEATURE GATE
🎮 HARDWARE & SENSOREN
🕹️
Gamepad API + Haptics
W3C · Chrome/Firefox · requestAnimationFrame
Liest Buttons und Analog-Sticks in Echtzeit via RAF-Polling. Haptisches Feedback via vibrationActuator.playEffect. Standard-Button/Axis-Mapping für Xbox/PS-Controller.
LAB + QUIZ HARDWARE HAPTICS RAF POLLING
🧭
Generic Sensor — Orientation
W3C · AbsoluteOrientationSensor · iOS perm
Quaternion-Daten von Gyro/Accel/Magneto → CSS matrix3d → rotierender 3D-Würfel. iOS-Permission-Flow integriert. Fallback auf deviceorientationevent Euler-Winkel.
LAB + QUIZ HARDWARE QUATERNION CSS 3D
📍
Geolocation watchPosition
W3C · Alle Browser · HTTPS required
Streamt GPS-Koordinaten live mit 50m-Accuracy-Filter (Ausschluss schlechter Messungen). Alle 3 Fehlertypen behandelt. Lat/Lng/Altitude + Accuracy-Rating.
LAB + QUIZ HARDWARE HTTPS ACCURACY FILTER
🖱️
Pointer Lock API
W3C · Alle Browser · Game Input
Sperrt den Cursor in einer Game-Zone und liefert rohe movementX/Y-Deltas ohne Bildschirm-Rand-Limits. Basis jedes Browser-FPS-Spiels. Korrektes On/Off-Listener-Pattern.
MINI DEMO RAW DELTA GAME INPUT
⌨️
Keyboard Layout Map
WICG · Chrome 69+ · Physical Keys
Liest die physische Tastatur-Belegung: was steht auf der 'Q'-Taste? QWERTY→'q', AZERTY→'a'. Navigator.keyboard.getLayoutMap() gibt ein vollständiges Mapping zurück.
MINI DEMO LOCALE
💾 STORAGE & FILES
📁
File System Access API
WICG · Chrome 86+ · showOpenFilePicker
Öffnet, bearbeitet und speichert Dateien direkt auf dem lokalen Dateisystem via nativen OS-Dialogen. showOpenFilePicker + showSaveFilePicker + FileSystemWritableFileStream.
LAB + QUIZ HTTPS NATIVE DIALOG WRITABLE
💽
Storage Manager Quota
W3C · Alle Browser · navigator.storage
Zeigt aktuellen Quota-Verbrauch und verfügbaren Speicher als Progress-Bar. navigator.storage.estimate() + .persist() für "Daten nie automatisch löschen"-Modus.
MINI DEMO QUOTA PERSISTENT
🔏
Web Locks — Mutex
W3C · Chrome 69+ · Cross-Tab Mutex
Setzt einen exklusiven Named Lock über navigator.locks.request — funktioniert als Cross-Tab-Mutex. Simuliert 4s Write-Operation innerhalb des Locks, danach automatische Freigabe.
MINI DEMO CROSS-TAB EXCLUSIVE
🗜️
Compression Streams API
WICG · Chrome 80+ · Native GZIP
Komprimiert Text nativ zu GZIP im Browser ohne externe Lib. Response-Wrapping-Pattern für einfaches arrayBuffer(). Zeigt Before/After Byte-Größen und Kompressionsrate.
MINI DEMO GZIP STREAMS
📱 DEVICE & OS
📺
Picture-in-Picture API
W3C · Chrome 70+ · Firefox 116+
Poppt ein Video in ein natives OS-Float-Fenster. Einfacher Toggle: requestPictureInPicture / exitPictureInPicture. Arbeitet mit jedem Video-Element.
MINI DEMO NATIVE WINDOW
💾
Device Memory API
WICG · Chrome 63+ · Privacy buckets
Liest gerundetes RAM-Budget (0.25/0.5/1/2/4/8 GB) und verzweigt UX zu Low-End vs High-End Rendering-Empfehlungen. Privacy-sichere Buckets by spec.
MINI DEMO ADAPTIVE
↗️
Web Share API
W3C · Mobile + Desktop · navigator.share
Öffnet den nativen OS-Share-Dialog (WhatsApp, Mail, Kopieren etc.) per navigator.share(). Alert-Fallback für Desktop-Browser. Korrekte Cancellation-Behandlung.
MINI DEMO NATIVE UI HTTPS
👤
Contact Picker API
WICG · Android Chrome · navigator.contacts
Importiert Kontakt-Daten (Name, Email, Telefon) direkt aus dem Gerät-Adressbuch ohne App-Zugriff. Nativer Picker für datenschutzkonformes Contact-Import.
MINI DEMO HARDWARE HTTPS MOBILE ONLY
🔴
Badging API
WICG · PWA · navigator.setAppBadge
Setzt einen numerischen Badge auf dem installierten PWA-App-Icon im Taskbar/Dock — wie native App-Notifications. Kein Popup, nur diskreter Counter auf dem Icon.
MINI DEMO PWA NOTIFICATION
⌨️
Virtual Keyboard API
WICG · Chrome 94+ · Mobile
Verhindert Auto-Scroll beim Öffnen der Soft-Tastatur. overlaysContent=true + CSS env(keyboard-inset-height) für Custom-Layout-Control auf Mobile-Geräten.
MINI DEMO MOBILE CSS ENV EXPERIMENTAL
💤
Idle Detection API
WICG · Chrome 94+ · HTTPS · Permission
Erkennt OS-Level Benutzer-Inaktivität und Screen-Lock nach 60s Schwellenwert. Korrekter Permission-First-Flow. Basis für Auto-Logout und Energy-Saving-Modi.
MINI DEMO HTTPS EXPERIMENTAL
🔤
Local Font Access API
WICG · Chrome 103+ · Permission
Fragt alle installierten System-Fonts via window.queryLocalFonts() ab und füllt einen Dropdown mit bis zu 50 Font-Families — für Design-Tools ohne Font-Upload.
MINI DEMO SYSTEM FONTS EXPERIMENTAL
🔔
Notification API
W3C · Alle Browser · Permission-gated
Native OS-Benachrichtigungen ohne App — erscheinen im Notification Center auch wenn Tab nicht aktiv ist. Simple / Rich (Icon + Body) / Auto-Close / requireInteraction. Voller Event-Log.
LAB + QUIZ HTTPS RICH NOTIFICATIONS EVENT TRACKING
🎨
EyeDropper API
WICG · Chrome 95+ · sRGBHex
Aktiviert eine system-weite Pixel-Lupe und gibt den Hex-Farbwert des angeklickten Pixels zurück. Für Custom Color-Picker in Design-Apps ohne Drittlib.
MINI DEMO HTTPS
🌐 WEB PLATFORM
📊
PerformanceObserver — LongTask
W3C · Chrome 58+ · buffered
Beobachtet Main-Thread-Blockaden über 50ms (Long Tasks). Button blockiert UI für 400ms — Observer loggt es sofort. Basis für Jank-Detection und Core Web Vitals TBT.
LAB + QUIZ CORE WEB VITALS JANK
CSS Custom Highlight API
W3C · Chrome 105+ · Feature Fix ✓
Markiert Text-Ranges via ::highlight() Pseudo-Element ohne DOM-Manipulation. CSS.highlights.set() + new Highlight(range) — Feature-Detection-Bug behoben.
MINI DEMO EXPERIMENTAL NO DOM CHANGE
🔗
URLPattern API
WICG · Chrome 95+ · Router Pattern
Matcht URLs gegen Named-Parameter-Patterns (z.B. /shop/:category/:id) und extrahiert die Gruppen. Basis für Client-Side-Router ohne Regex-Hell.
MINI DEMO ROUTING EXPERIMENTAL
🔤
CSS Font Loading API
W3C · Alle Browser · FontFace
Lädt externe Web-Fonts (Orbitron/Google Fonts) dynamisch zur Laufzeit via new FontFace().load() + document.fonts.add(). Kein @font-face im CSS nötig.
MINI DEMO DYNAMIC FONT ASYNC
🎯
IntersectionObserver
W3C · Alle Browser · Threshold + RootMargin
Beobachtet wann Elemente in den Viewport scrollen — ohne Layout-Thrashing. Einstellbares Threshold (0–100%) und RootMargin live anpassbar. 18 Elemente mit Scroll-Animation-Demo.
LAB + QUIZ LAZY LOADING RATIO TRACKING CORE WEB VITALS
📐
ResizeObserver
W3C · Chrome 64+ · contentBox + borderBox
Misst Größenänderungen von DOM-Elementen live. Zeigt ContentBox vs. BorderBox, Component-Breakpoints (XS/SM/MD/LG/XL) und Multi-Target-Beobachtung mit einem einzigen Observer.
LAB + QUIZ RESPONSIVE MULTI-TARGET KEIN THRASHING
👁️
Page Visibility API
W3C · Alle Browser · document.hidden
Pausiert Timer wenn Tab im Hintergrund, resumed beim Aktivieren. Minimiert CPU-Last via visibilitychange-Event + clearInterval/setInterval Toggle.
MINI DEMO CPU SAVE LIFECYCLE
⌀ KEINE ERGEBNISSE FÜR DIESE SUCHE