Web API Demo 網頁 API 演示 (Web API Demonstration)

這個專案展示了現代網頁 API 的使用方法和實際應用場景。透過互動式的演示和程式碼範例，幫助開發者更好地理解和使用這些強大的網頁功能。

This project demonstrates the usage and practical applications of modern Web APIs. Through interactive demonstrations and code examples, it helps developers better understand and utilize these powerful web features.

功能特色 (Features)

• 清晰的 API 分類展示 (Clear API categorization)
• 互動式演示界面 (Interactive demo interface)
• 即時程式碼範例 (Real-time code examples)
• 瀏覽器相容性資訊 (Browser compatibility information)
• MDN 文件和 Can I Use 連結 (MDN documentation and Can I Use links)

API 分類 (API Categories)

多媒體與串流 (Multimedia & Streaming)

• ✅ MediaDevices API
• ✅ Web Audio API
• ✅ MediaRecorder API
• ✅ HTMLMediaElement
• ✅ MediaSource API
• ✅ AudioContext
• ✅ VideoTrackList
• ✅ AudioTrackList
• ✅ TextTrackList
• ✅ TextTrackCue
• ✅ Canvas Capture MediaStream API
• ✅ Picture-in-Picture API
• ✅ Web MIDI API
• ✅ Screen Capture API

裝置存取 (Device Access)

• ✅ Geolocation API
• ✅ Battery Status API
• ✅ Vibration API
• ✅ Web Bluetooth API
• ✅ WebUSB API
• ✅ Web Serial API
• ✅ WebHID API
• ✅ Ambient Light Sensor API
• ✅ Device Motion & Orientation API
• ✅ Contact Picker API
• ✅ Proximity Sensor API
• ✅ Magnetometer API
• ✅ Accelerometer API
• ✅ Gyroscope API
• ✅ NFC API

儲存與檔案 (Storage & Files)

• ✅ Local Storage API
• ✅ Session Storage API
• ✅ IndexedDB API
• ✅ File API
• ✅ File System Access API
• ✅ Drag and Drop API
• ✅ Cache API
• ✅ Cookie Store API

通訊與連接 (Communication & Connectivity)

• ✅ WebRTC API
• ✅ Broadcast Channel API
• ✅ WebSocket API
• ✅ Web Share API
• ✅ Fetch API
• ✅ XMLHttpRequest
• ✅ Beacon API
• ✅ Server-Sent Events (EventSource)
• ✅ Network Information API
• WebTransport API ✅
• Web Push API ✅

效能與背景處理 (Performance & Background Processing)

• ✅ Web Workers API
• ✅ Service Workers API
• ✅ Shared Workers API
• ✅ Background Sync API
• ✅ Background Fetch API
• ✅ Background Tasks API
• ✅ Performance API
• ✅ Navigation Timing API
• ✅ Resource Timing API
• ✅ User Timing API
• ✅ Paint Timing API
• ✅ Long Tasks API
• ✅ Idle Detection API

圖形與動畫 (Graphics & Animation)

• ✅ WebGL API
• ✅ WebGL2 API
• ✅ WebGPU API
• ✅ Web Animations API
• ✅ Canvas API
• ✅ SVG API
• ✅ OffscreenCanvas API
• ✅ ImageBitmap API
• ✅ ImageCapture API
• ✅ CSS Typed OM API

互動與觀察 (Interaction & Observation)

• ✅ Gamepad API
• ✅ Pointer Events API
• ✅ Touch Events API
• ✅ Mouse Events API
• ✅ Keyboard Events API
• ✅ Wheel Events API
• ✅ Intersection Observer API
• ✅ Resize Observer API
• ✅ Mutation Observer API
• ✅ Page Visibility API
• ✅ Web Speech API
• ✅ EyeDropper API

系統整合 (System Integration)

• ✅ Clipboard API
• ✅ Fullscreen API
• ✅ Web Notifications API
• ✅ Screen Orientation API
• ✅ Wake Lock API
• ✅ Web Locks API
• ✅ Presentation API
• ✅ Payment Request API
• ✅ Credential Management API
• ✅ Badging API
• ✅ File Handling API

安全與支付 (Security & Payment)

• ✅ Web Crypto API
• ✅ Permissions API
• ✅ Content Security Policy (CSP)
• ✅ Subresource Integrity (SRI)
• ✅ Cross-Origin Resource Sharing (CORS)
• ✅ Referrer Policy API
• ✅ Feature Policy API

開始使用 (Getting Started)

1. 安裝依賴 (Install dependencies)：

npm install

2. 啟動開發伺服器 (Start development server)：

npm run dev

3. 打開瀏覽器訪問 (Open in browser)：

http://localhost:5173

瀏覽器支援 (Browser Support)

本專案中的 API 支援度依據各個瀏覽器版本而不同，詳細資訊請參考各 API 展示頁面的瀏覽器相容性表格。

API support in this project varies depending on browser versions. Please refer to the browser compatibility tables on each API demonstration page for detailed information.

技術棧 (Tech Stack)

• React
• TypeScript
• Vite
• Tailwind CSS

相關資源 (Related Resources)

• MDN Web API 參考 (MDN Web API Reference)
• Can I use
• Web API 索引 (Web API Index)