5 年前第一次參加鐵人賽，只寫了兩篇就 Let it GO，

5 年後的今天，我終於可以自豪地恭喜自己：我！完！賽！啦！

寫 30 篇文很難，但最難的是要記得每天發文 😂，這次參加鐵人賽到第 10 天時忘記發文，然後就 GG 惹，只好重新再參賽一次，經過這次的教訓，每到 12 點就立刻發文以免忘記，幸好順利完賽了。

因為我好像忘了寫導讀，所以就把最後這篇完賽文當作前導頁吧！

主題的選擇

我這次選的主題是 Web API，Web API 其實存在已久，但有的朋友也許不知道有哪些 Web API，或是聽過一些卻從未使用過，所以我想藉由這篇文章將一些成熟且沒有被棄用的 Web API 整理起來與大家分享。

我們在使用現代框架的同時，也別忘了其實使用原生 JavaScript 和 Web API，就能做出很多好玩的東西，有時候甚至你以為是現代框架的功能？但其實他們是 Web API 的技術唷！

也因此，這個系列全程使用原生 JavaScript 撰寫，並盡量在每一篇文章末都提供完整的線上範例，讓大家在能實際看到各種效果的同時，也能專注在 Web API 上。

Web API 主題列表

有的 Web API 功能較多，可以有很多好玩的應用，所以篇幅會長至 2、3 篇，以下整理我這 30 天以來所寫的 Web API，希望透過這篇遲來的導讀，能讓大家更了解文章內容。

Geolocation API

Day 1 ~ 2

我用了 2 篇文章的長度與大家分享 Geolocation API，這個 API 可以取得使用者的地理位置做各種有趣的應用。

第一篇介紹該 API 常見的方法，以及搭配地圖模擬使用者移動的位置。

第二篇搭配 Leaflet Routing Machine 套件，實作一個簡單的叫車服務：輸入上車地址後，會自動計算司機從當前位置到目的地的路線，並且進行模擬移動。

Drag and Drop API

Day 3

第三天介紹 Drag and Drop API，我們利用這個 API 製作拖曳的功能，相信大家應該常使用它。不過有趣的是，我曾碰過一些朋友在使用時，完全不知道他是原生的 API，所以在此也特地拉出來跟大家介紹，希望透過這個分享，可以更了解 Drag and Drop API 的基本功能以及延伸應用。

History API

Day 4

History API 也是一個我們常常在使用卻不自知的 API，因為他跟 SPA 的其中一個技術有相當大的關聯。

我們在不重整頁面的情況下，可以讓使用者感到順暢的頁面過渡效果，這個是怎麼做的呢？他背後的技術就是 History API，也就是說，我們即使不用 SPA，也能使用 History API 做到頁面過渡的效果。

Fullscreen API

Day 5

Fullscreen API 是一個很常見的功能，他可以讓網頁以全螢幕顯示，提供沉浸式的體驗，文章內簡單跟大家分享應用，以及一些調整樣式的方法。

Web Notifications API

Day 6 ~ 8

這是其中一個篇幅高達 3 篇的 API，是個使用者很討厭，但老闆卻非常喜歡的功能 XXD。其實通知做得好也不一定會擾民，如果是社群或電商型態的網站，我相信發送推播通知是有必要性的！

這三篇文章，從一開始介紹 Web Notifications 該怎麼使用，到最後結合 Google Cloud 與 firebase 的應用，算是一個由淺至深的詳細流程，希望對想要開發推播通知功能的各位有所幫助

File API

Day 9

我原本以為他會跟 Fullscreen API 一樣短，沒想到他算是單篇文章內，篇幅排名前三長的。也許是因為我把 File API 的核心概念、FileReader，和 Blob 物件的功能都全部講了一遍，最後還有結合前面講到的 Drag and Drop API 做了一個簡單的範例。

Battery Status API

Day 10

Battery Status API 可能是我們 Web 開發者比較少接觸的 API，但其實運用得當，也是可以在 Web 端製造一些小巧思和創意，並且協助使用者降低資源消耗，與提高使用者的瀏覽體驗。

Audio 和 Video API

Day 11 ~ 12

這兩篇是獨立的，第一篇講 Audio API，第二篇講 Video API。只是他們的功能和使用方法都非常類似，所以我就放在一起寫了。

文章內比較好玩的是，我介紹了如何自定義播放介面，還有 WebVTT 字幕檔的結構和使用方法，如果你對影片影音有興趣，歡迎參考看看。

Web Workers API

Day 13 ~ 15

他跟前面的 Web Notifications API 一樣篇幅高達 3 篇，而且 Web Notifications API 裡面的一些範例就有用到 Web Workers API 唷！也就是說，Web Workers API 是本系列文章的重點之一 XXD。

我很喜歡自己在 Day13 取的標題：使用 Web Workers API 走出自己的路，我覺得有打到 Web Workers API 的核心概念(自己說)。

Web Workers API 是用來解決效能問題的，我們可以使用 Web Workers API 讓應用程式在後台執行緒執行任務，從而保持主線的暢通，文章內有詳細介紹 Web Workers 的類型與使用情境，非常推薦一讀。

WebSocket API

Day 16 ~ 17

相信 99.9999% 的前端開發者都用過 WebSocket API，我當時在寫 WebSocket API 時，就怕內容太淺無法吸引大家，所以這兩篇是唯一有搭配後端架設 Server 的文章。

文章簡單介紹如何架設 WebSocket Server，以及 WebSocket 處理訊息的機制。

Web Speech API

Day 18 ~ 20

Web Speech API 這 3 篇有明確且獨立的主軸：第一篇是讓網頁聽我們說話，第二篇是讓網頁開口說話，第三篇是加入 AI 互動聊天，且每一篇都有提供範例。

推薦第三篇與 AI 互動聊天時，我設定的這個有點好玩的吐槽好朋友，如果你們有 openAI API key，可以試玩看看。

MutationObserver API

Day 21 ~ 22

MutationObserver API 可以主動監聽 DOM 的變化，我喜歡用他取代 setTimeout 或 setInterval，這兩篇文章各提供了一個範例，包括動態新增內容、動態更新 UI，可以試著瀏覽程式碼，也許你會跟我一樣愛上他。

Intersection Observer API

Day 23 ~ 24

Intersection Observer API 與 MutationObserver API 相同，都是觀察型的 API，他可以觀察 DOM 元素與可視區域或另一個元素的相交情況，非常適合做懶加載 (Lazy Load) 和無限滾動 (Infinity Scroll) 的功能，我在第二篇也有分享另外一種應用方式，希望能帶給你不同的靈感。

IndexedDB API

Day 25 ~ 26

用膩了 localStorage？想跟後端一樣玩玩看資料庫？也許可以考慮用用看 IndexedDB API，他是前端另一種儲存資料的方式，IndexedDB API 的儲存容量更大，可以管理更多結構化數據，操作起來也更像資料庫，非常推薦大家玩玩看。

Web Animations API

Day 27 ~ 28

跟 CSS animation 一樣，Web Animations API 也是用來處理元素動畫，但不同的是，Web Animations API 可以調整更多的細節，適合做互動性強的動畫。文章第一篇是介紹，第二篇做了一個打散文字的動畫效果，有提供範例頁面。

Screen Capture API

Day 29

不要覺得分享螢幕畫面很難，其實用 Screen Capture API 就能搞定，該 API 的核心功能是取得使用者授權後，我們就能取得畫面，並進行顯示、錄影或分享，就跟我們在使用視訊軟體如 Google Meet、Zoom 的螢幕分享功能一樣。

Web Cryptography API

Day 30

鐵人賽的最後一篇，想跟大家分享的是安全性與加密操作的基礎概念，我們可以使用 Web Cryptography API 在瀏覽器進行加密、解密、生成和驗證密鑰等動作，提高網頁應用的安全。文章內還有介紹一些常見的加密演算法，如 RSA、AES、SHA-256，等。

結語

以上就是我分享的所有 Web API 以及相關介紹，如果有興趣可以選擇對應的天數進行閱讀，如果有任何問題，都歡迎留言或是到我的部落格聯繫我：

MUKI space*