鐵人檔案
在這個系列中，我會帶大家從 Canvas 出發，一路探索瀏覽器中各式各樣的 Web API。
Canvas 只是起點，接下來還有 Drag and Drop、MediaDevices、Clipboard、Storage、WebSocket …… 這些 API 不僅讓前端開發更強大，也讓網頁逐漸具備桌面應用的體驗。
希望透過這趟旅程，你能更清楚理解它們的用途、限制與背後的安全設計，一起體會—— 「瀏覽器，其實比你想像中更強大」 🚀
昨天我們用 MediaDevices 打開麥克風／攝影機，並用 MediaRecorder 把「裝置來源」（ex: 麥克風／攝影機）的聲音錄下來。 今天把場景從...
昨天把「畫面/聲音 → 檔案」跑通（MediaDevices + MediaRecorder）。 今天要解鎖兩個在網頁上比較少主動用、很像手機原生功能的酷招：全...
把網頁變得像手機 App 的關鍵一步，就是呼叫系統「原生分享面板」！ 📤 🔗這篇會帶你用 Web Share 分享連結、檔案、Canvas 截圖，行動裝置支援最...
今天要介紹三個 Web API——Screen Orientation、Wake Lock、Vibration——很有趣！ ✨✨✨ 因為它們把「原生 App 的...
在日常生活裡，無論是手機還是電腦，我們都依賴 作業系統的通知：不用打開通訊 App，就能知道有人傳訊；不用進購物網站，就能知道包裹正在路上。 現在，透過 Not...
在日常生活裡，我們早就習慣跟「會說話、能聽懂」的科技互動：Siri、Google 助理、YouTube/Meet 自動字幕…… 這些熟悉的功能，其實在瀏覽器裡也...
你有沒有遇過這種情況：網路慢到爆、手機快沒記憶體，結果網頁還硬是要載一堆大圖和特效，整個卡到不行？其實，網頁不只可以根據螢幕大小調整排版，還能「感知」你的裝置狀...
真的是需要休息一下... 今天來點輕鬆又有趣的！ 😇把整個螢幕當成調色盤，一滴就準。這篇超短，三分鐘懂一個「看起來像原生 App」的小魔法。 🎨 EyeDrop...
延續昨天的 EyeDropper API，我們今天來看看另外一組「輸入相關」的 Web API：Pointer Lock API 與 Keyboard Lock...
過去幾天從多媒體、分享、裝置能力一路走到使用者體驗。今天換個節奏，來一個 畫面動起來 的主題：Web Animations API（WAAPI）。這個 API...
