大家好，我是 Alice Yen（丸子），一名前端工程師。

我希望自己成為能清晰表達、在技術場合侃侃而談的工程師。參加鐵人賽正是一個磨練的機會，透過連續書寫的節奏和壓力，深入研究技術主題，結合原理、歷史脈絡與實作練習，系統性地輸出內容，逐步建立屬於自己的知識堡壘！🏰

在決定主題時，我想起了前陣子做的一個個人專案——用 Canvas 2D 實作的室內設計工具。它跟一般電商網站不太一樣，反而像是給設計師用的：可以自由拉牆線、匯入圖檔、調整畫布比例，設計完還能匯出成稿。整個開發過程既燒腦又過癮，讓我玩得很開心。

下方的 YouTube 影片快速示範主要功能，歡迎點開觀看

不過當時對 Canvas 的效能細節、瀏覽器的安全限制還沒有太多理解，很多地方只是「先讓它跑起來再說」。藉著這次鐵人賽的機會，重新梳理這一塊知識的地基，順勢延伸去探索更多有趣又實用的 Web API！

Web API 是什麼？為什麼重要？

不知道大家有沒有覺得「現在的網頁好像 App 一樣強大」，這些能力是怎麼來的？

定義一下 Web API

Web API 是瀏覽器提供給 JavaScript 的功能接口，
讓我們可以存取底層資源、裝置功能、甚至作業系統層的能力。

最常見的例子，就是我們每天都在使用的：

document.querySelector(".my-element")

這是一個 DOM API，讓你可以從 JavaScript 直接操作畫面上的 HTML 元素。

其實，這樣的 API 還有非常多：你能想到的、你用過的、甚至你不知道自己其實在用的——幾乎每個與「瀏覽器互動」有關的能力，背後都有 Web API 在支撐。

為什麼 Web API 很重要？

因為有了這些 API，前端不再只是靜態頁面的製作者，而是能構築出應用級體驗的開發者。

這代表前端可以：

• 控制音訊與視訊
• 存取檔案與資料庫
• 使用麥克風、攝影機、定位資訊
• 發送通知、震動手機
• 即時接收 WebSocket 資料
• 畫圖、做動畫，甚至跑 3D 模型

這些過去在網頁上比較難實作得流暢，如今藉由 Web API 的支援，也能打造出更接近原生 App 的體驗。

Web API 分類速覽

Web API 數量龐大，我們可以依照功能，大致分為幾個主要分類，每類都有其代表性 API：

有些 API 很常見，有些則冷門但實用，後面幾篇文章會挑幾個來細講與實作。

小試身手：Web API 能做到什麼？

你知道嗎？只要幾行程式碼，就可以讓使用者的瀏覽器進入全螢幕，甚至跳出通知！

document.documentElement.requestFullscreen();
new Notification("嗨，你進入了全螢幕模式！");

這就是 Web API 的力量。

👉 歡迎追蹤這個系列，我會從 Canvas 開始，一步步帶你認識更多 Web API 🎯