Project 30: Browser Health Dashboard

📋 Project Brief

Build a browser capabilities dashboard that audits and displays what the current browser supports. This diagnostic tool checks for modern APIs, displays hardware info, and audits storage usage.

✅ Feature Requirements

Feature 1: Capability Detection

Acceptance Criteria:

• Check support for 20+ APIs: WebGL, WebGPU, WebUSB, WebBluetooth, WebXR, Service Workers, Push API, etc.
• Each API shows: ✅ Supported / ❌ Not Supported
• Group by category: Graphics, Communication, Hardware, Storage, Media
• Use feature detection (not user-agent sniffing)

Feature 2: Battery API

Acceptance Criteria:

• Display current battery percentage and charging status
• Show estimated time to full charge or discharge
• Update in real-time as battery state changes
• Gracefully handle devices/browsers without Battery API

Feature 3: Network Information

Acceptance Criteria:

• Display connection type: WiFi, 4G, 3G, Ethernet, Offline
• Show effective bandwidth estimate and round-trip time
• Show "Data Saver" mode status if available
• Update dynamically when connection changes

Feature 4: Screen Metrics

Acceptance Criteria:

• Display: screen resolution, viewport size, device pixel ratio (DPR)
• Detect refresh rate (if available via requestAnimationFrame timing)
• Show color depth and color gamut support
• Detect touch support and number of touch points

Feature 5: Storage Audit

Acceptance Criteria:

• Show localStorage usage: bytes used vs. quota
• Show IndexedDB databases and their sizes (via navigator.storage.estimate())
• Show cookie count and total cookie size
• Show Cache Storage usage (Service Worker caches)
• A "Clear All" button with confirmation for each storage type

📊 API Detection Matrix

Category	APIs to Check
Graphics	WebGL, WebGL2, WebGPU, OffscreenCanvas
Media	MediaRecorder, Web Audio, getUserMedia, PiP
Hardware	Battery, Bluetooth, USB, Gamepad, Vibration
Communication	WebSocket, WebRTC, BroadcastChannel, SharedWorker
Storage	localStorage, IndexedDB, Cache API, File System Access
Platform	Service Workers, Push API, Notifications, Wake Lock

🧪 Testing Checklist

• Unit test feature detection functions (mock navigator properties)
• Unit test storage size formatting (bytes → KB → MB)
• Integration test: dashboard renders without errors on Chrome, Firefox, Safari
• Test graceful degradation for unsupported APIs
• A11y: all status indicators have text labels (not just icons/colors)