PART1 認識 Browser Web API 與資料查詢

CH01 什麼是 Web API？
深入理解 Web API
常見問題
本章回顧

CH02 查閱與使用 Browser Web API 的必備知識
如何有效查閱 Browser Web API 官方文件
如何判斷瀏覽器支援情況與相容性
常見問題
本章回顧

CH03 Browser Web API 索引與功能整理
Browser Web API 分類與簡介（從 A 到 X）
本章回顧

PART2 網站定位與路線追蹤應用

CH04 用 Geolocation API 取得與追蹤使用者地理位置
Geolocation API 的核心功能
檢查瀏覽器是否支援 Geolocation API
使用 getCurrentPosition() 取得當前位置
出現錯誤訊息：Only request geolocation information in response to a user gesture.
拒絕權限後該如何重新啟用
在地圖上顯示使用者所在位置
使用 watchPosition() 追蹤使用者的地理位置
模擬移動功能
常見問題
小結
本章回顧

CH05 用 Geolocation API 和 Leaflet Routing Machine 實作叫車服務功能
從位置追蹤到路線導航的完整流程
用 Leaflet 與 Routing Machine 建構叫車服務
開始模擬：模擬司機移動的過程
停止模擬
範例畫面
常見問題
小結
本章回顧

PART3 裝置功能與媒體應用實作

CH06 使用〈audio〉打造音樂播放器
嵌入音訊檔案
客製化播放器
用 CSS 調整滑桿樣式
建立音樂播放控制功能
實作小技巧
常見問題
小結
本章回顧

CH07 用〈video〉實作影音播放功能
Video 標籤的基本功能
顯示影片字幕
自訂子母畫面
處理影片緩衝與播放狀態
根據時間點加入互動提示
影片播放完畢後觸發其它動作
常見問題
小結
本章回顧

CH08 使用 Screen Capture API 取得你的螢幕畫面
擷取螢幕畫面
擷取聲音
偵測分享狀態
怎麼手動停止分享？
常見問題
小結
本章回顧

PART4 網頁介面操作與互動

CH09 用 Drag and Drop API 拖曳網頁元素
Drag and Drop API 介紹
如何實現拖放功能？
Drag 拖放事件
Drag 運用範例
常見問題
小結
本章回顧

CH10 認識 History API：SPA 的關鍵技術之一
History API 做了什麼？
如何操作瀏覽器的歷史紀錄
實作 SPA 的頁面切換效果
非同步載入內容與深度連結應用
常見問題
小結
本章回顧

CH11 探索 Fullscreen API：從基礎到應用場景
請求和退出全螢幕模式
處理全螢幕狀態變化
在全螢幕模式調整樣式
單個元素或整頁變成全螢幕
替代方案
常見問題
小結
本章回顧

PART5 觀察與監控 DOM 的變化

CH12 如何使用 MutationObserver API 追蹤 DOM 的變化
如何使用 Mutation Observer 監聽 DOM 變動
MutationObserver API 基本範例
監控要動態載入的畫面
動態更新 UI
常見問題
小結
本章回顧

CH13 深入了解 Intersection Observer API 及其應用
為什麼需要 Intersection Observer？
Intersection Observer 的基本語法
Options 屬性
監聽目標元素
根據使用者瀏覽行為，觸發互動提示
根據滑動的頁面修改選單顏色
延遲載入 JavaScript
常見問題
小結
本章回顧

PART6 語音、聊天與 AI 互動

CH14 使用 Web Speech API 讓網頁聽得懂我們說的話
做一個基本的語音識別功能
持續監聽使用者的語音輸入
監聽語音輸入的更多事件
實作語音搜尋系統
常見問題
小結
本章回顧

CH15 使用 Web Speech API 讓網頁開口說話
基本用法介紹
SpeechSynthesisUtterance 屬性介紹
SpeechSynthesisUtterance 事件介紹
實作動態語音選擇器
更自然的語音效果
常見問題
小結
本章回顧

CH16 用 Web Speech API 與你的 AI 朋友互動聊天
實作一個 AI 聊天好友
實現上下文記憶
將 AI 回應轉為語音播放
常見問題
小結
本章回顧

PART7 通知功能與後台推播應用

CH17 使用 Web Notifications API 幫網站加入通知功能
Web Notifications API 介紹
請求通知權限
建立與顯示通知
使用者與通知的互動
使用 Web Notifications API 要注意的事
搭配 Permissions API 進行權限管理
常見問題
小結
本章回顧

CH18 Web Notifications API 搭配 Service Workers 發送通知
什麼是 Service Workers？
如何使用 Service Workers 發送通知
使用開發者工具模擬推播
使用 Push Companion 測試背景推播
常見問題
小結
本章回顧

CH19 Web Notifications API 結合 Google Cloud 的應用
Google Cloud 在通知系統中的角色
在 Google Cloud 建立專案
在 Firebase 建立 Messaging 服務
使用 Firebase Console 發送測試訊息
發送或排程通知
常見問題
小結
本章回顧

PART8 網站效能與背景執行緒應用

CH20 使用 Web Workers API 走出自己的路
Web Workers 的類型與使用情境
常見問題
小結
本章回顧

CH21 Web Workers API 的限制與效能優化處理
Web Workers 的限制
必須同源才能通訊
支援部分 JavaScript API
效能優化建議
什麼時候適合使用 Web Worker？
常見問題
小結
本章回顧

CH22 管理 Web Worker 的生命週期與資源
重用 Web Worker，避免浪費資源
使用 terminate() 方法關閉不再需要的 Worker
建立 Worker Pool，有效管理 Worker 資源
替每個 Worker 指定名稱，以便於除錯或管理
使用效率較高的數據結構
JSON 與 ArrayBuffer 的差別
常見問題
小結
本章回顧

PART9 檔案處理與本地端資料庫管理

CH23 File API 的架構與應用
File API 的構造
取得檔案資訊：File/FileList
讀取檔案內容：FileReader
Blob：建立自訂檔案資料
拖放與檔案預覽
常見問題
小結
本章回顧

CH24 另一種儲存資料的方式：IndexedDB API
IndexedDB API 的特性與使用場景
在瀏覽器檢視 IndexedDB 資料
IndexedDB 的資料庫架構與核心概念
建立與初始化資料庫
IndexedDB 的 Transaction 機制
IndexedDB CRUD 操作實作
常見問題
小結
本章回顧

PART10 安全與即時通訊

CH25 使用 Web Cryptography API 提高網頁應用的安全性
對稱式與非對稱式加密介紹
試著生成一組密鑰
使用 AES-GCM 加密與解密資料
使用 RSA 加密與解密資料
常見問題
小結
本章回顧

CH26 使用 Google Cloud Run 架設 WebSocket Server
自己架設 WebSocket Server 的原因
在本地端啟動 WebSocket Server 並進行測試
建立 Google Cloud Run 專案
WebSocket 連線的困難點
主動檢查 WebSocket 的連線狀態
常見問題
小結
本章回顧

PART11 Browser Web API 組合技

CH27 用 WebSocket API 和 Canvas API 實作多人白板服務
使用到的 Browser Web API
架構設計
使用 Node.js + Fastify + ws 模組進行 WebSocket 通訊
使用 Canvas 即時取得筆畫資訊
分配不同顏色的畫筆
顯示線上人數
常見問題
小結
本章回顧

CH28 結合 File API 與 Web Speech API 製作文件閱讀器
使用到的 Browser Web API
使用 Page Visibility API 判斷當前頁面的可見性狀態
文件閱讀器
建立變數
常見問題
本章回顧

CH29 製作情緒追蹤器，以更好地理解自己
使用到的 Browser Web API
打造自己的情緒追蹤器
建立 IndexedDB 資料庫結構
網頁載入時初始化並顯示紀錄
取得使用者當前位置
讀取使用者上傳的檔案
儲存一筆新紀錄
顯示所有紀錄
常見問題
本章回顧

APPENDIX 附錄

附錄 A Browser Web API 的比較與選用建議
儲存資料
檔案上傳
通訊
擷取裝置的影像或聲音
語音互動

附錄 B 值得注意與追蹤的實驗性 Browser Web API
File System Access API
EyeDropper API
Compute Pressure API
HTML Sanitizer APIasnd PART1 認識 Browser Web API 與資料查詢

CH01 什麼是 Web API？
深入理解 Web API
常見問題
本章回顧

CH02 查閱與使用 Browser Web API 的必備知識
如何有效查閱 Browser Web API 官方文件
如何判斷瀏覽器支援情況與相容性
常見問題
本章回顧

CH03 Browser Web API 索引與功能整理
Browser Web API 分類與簡介（從 A 到 X）
本章回顧

PART2 網站定位與路線追蹤應用

CH04 用 Geolocation API 取得與追蹤使用者地理位置
Geolocation API 的核心功能
檢查瀏覽器是否支援 Geolocation API
使用 getCurrentPosition() 取得當前位置
出現錯誤訊息：Only request geolocation information in response to a user gesture.
拒絕權限後該如何重新啟用
在地圖上顯示使用者所在位置
使用 watchPosition() 追蹤使用者的地理位置
模擬移動功能
常見問題
小結
本章回顧

CH05 用 Geolocation API 和 Leaflet Routing Machine 實作叫車服務功能
從位置追蹤到路線導航的完整流程
用 Leaflet 與 Routing Machine 建構叫車服務
開始模擬：模擬司機移動的過程
停止模擬
範例畫面
常見問題
小結
本章回顧

PART3 裝置功能與媒體應用實作

CH06 使用〈audio〉打造音樂播放器
嵌入音訊檔案
客製化播放器
用 CSS 調整滑桿樣式
建立音樂播放控制功能
實作小技巧
常見問題
小結
本章回顧

CH07 用〈video〉實作影音播放功能
Video 標籤的基本功能
顯示影片字幕
自訂子母畫面
處理影片緩衝與播放狀態
根據時間點加入互動提示
影片播放完畢後觸發其它動作
常見問題
小結
本章回顧

CH08 使用 Screen Capture API 取得你的螢幕畫面
擷取螢幕畫面
擷取聲音
偵測分享狀態
怎麼手動停止分享？
常見問題
小結
本章回顧

PART4 網頁介面操作與互動

CH09 用 Drag and Drop API 拖曳網頁元素
Drag and Drop API 介紹
如何實現拖放功能？
Drag 拖放事件
Drag 運用範例
常見問題
小結
本章回顧

CH10 認識 History API：SPA 的關鍵技術之一
History API 做了什麼？
如何操作瀏覽器的歷史紀錄
實作 SPA 的頁面切換效果
非同步載入內容與深度連結應用
常見問題
小結
本章回顧

CH11 探索 Fullscreen API：從基礎到應用場景
請求和退出全螢幕模式
處理全螢幕狀態變化
在全螢幕模式調整樣式
單個元素或整頁變成全螢幕
替代方案
常見問題
小結
本章回顧

PART5 觀察與監控 DOM 的變化

CH12 如何使用 MutationObserver API 追蹤 DOM 的變化
如何使用 Mutation Observer 監聽 DOM 變動
MutationObserver API 基本範例
監控要動態載入的畫面
動態更新 UI
常見問題
小結
本章回顧

CH13 深入了解 Intersection Observer API 及其應用
為什麼需要 Intersection Observer？
Intersection Observer 的基本語法
Options 屬性
監聽目標元素
根據使用者瀏覽行為，觸發互動提示
根據滑動的頁面修改選單顏色
延遲載入 JavaScript
常見問題
小結
本章回顧

PART6 語音、聊天與 AI 互動

CH14 使用 Web Speech API 讓網頁聽得懂我們說的話
做一個基本的語音識別功能
持續監聽使用者的語音輸入
監聽語音輸入的更多事件
實作語音搜尋系統
常見問題
小結
本章回顧

CH15 使用 Web Speech API 讓網頁開口說話
基本用法介紹
SpeechSynthesisUtterance 屬性介紹
SpeechSynthesisUtterance 事件介紹
實作動態語音選擇器
更自然的語音效果
常見問題
小結
本章回顧

CH16 用 Web Speech API 與你的 AI 朋友互動聊天
實作一個 AI 聊天好友
實現上下文記憶
將 AI 回應轉為語音播放
常見問題
小結
本章回顧

PART7 通知功能與後台推播應用

CH17 使用 Web Notifications API 幫網站加入通知功能
Web Notifications API 介紹
請求通知權限
建立與顯示通知
使用者與通知的互動
使用 Web Notifications API 要注意的事
搭配 Permissions API 進行權限管理
常見問題
小結
本章回顧

CH18 Web Notifications API 搭配 Service Workers 發送通知
什麼是 Service Workers？
如何使用 Service Workers 發送通知
使用開發者工具模擬推播
使用 Push Companion 測試背景推播
常見問題
小結
本章回顧

CH19 Web Notifications API 結合 Google Cloud 的應用
Google Cloud 在通知系統中的角色
在 Google Cloud 建立專案
在 Firebase 建立 Messaging 服務
使用 Firebase Console 發送測試訊息
發送或排程通知
常見問題
小結
本章回顧

PART8 網站效能與背景執行緒應用

CH20 使用 Web Workers API 走出自己的路
Web Workers 的類型與使用情境
常見問題
小結
本章回顧

CH21 Web Workers API 的限制與效能優化處理
Web Workers 的限制
必須同源才能通訊
支援部分 JavaScript API
效能優化建議
什麼時候適合使用 Web Worker？
常見問題
小結
本章回顧

CH22 管理 Web Worker 的生命週期與資源
重用 Web Worker，避免浪費資源
使用 terminate() 方法關閉不再需要的 Worker
建立 Worker Pool，有效管理 Worker 資源
替每個 Worker 指定名稱，以便於除錯或管理
使用效率較高的數據結構
JSON 與 ArrayBuffer 的差別
常見問題
小結
本章回顧

PART9 檔案處理與本地端資料庫管理

CH23 File API 的架構與應用
File API 的構造
取得檔案資訊：File/FileList
讀取檔案內容：FileReader
Blob：建立自訂檔案資料
拖放與檔案預覽
常見問題
小結
本章回顧

CH24 另一種儲存資料的方式：IndexedDB API
IndexedDB API 的特性與使用場景
在瀏覽器檢視 IndexedDB 資料
IndexedDB 的資料庫架構與核心概念
建立與初始化資料庫
IndexedDB 的 Transaction 機制
IndexedDB CRUD 操作實作
常見問題
小結
本章回顧

PART10 安全與即時通訊

CH25 使用 Web Cryptography API 提高網頁應用的安全性
對稱式與非對稱式加密介紹
試著生成一組密鑰
使用 AES-GCM 加密與解密資料
使用 RSA 加密與解密資料
常見問題
小結
本章回顧

CH26 使用 Google Cloud Run 架設 WebSocket Server
自己架設 WebSocket Server 的原因
在本地端啟動 WebSocket Server 並進行測試
建立 Google Cloud Run 專案
WebSocket 連線的困難點
主動檢查 WebSocket 的連線狀態
常見問題
小結
本章回顧

PART11 Browser Web API 組合技

CH27 用 WebSocket API 和 Canvas API 實作多人白板服務
使用到的 Browser Web API
架構設計
使用 Node.js + Fastify + ws 模組進行 WebSocket 通訊
使用 Canvas 即時取得筆畫資訊
分配不同顏色的畫筆
顯示線上人數
常見問題
小結
本章回顧

CH28 結合 File API 與 Web Speech API 製作文件閱讀器
使用到的 Browser Web API
使用 Page Visibility API 判斷當前頁面的可見性狀態
文件閱讀器
建立變數
常見問題
本章回顧

CH29 製作情緒追蹤器，以更好地理解自己
使用到的 Browser Web API
打造自己的情緒追蹤器
建立 IndexedDB 資料庫結構
網頁載入時初始化並顯示紀錄
取得使用者當前位置
讀取使用者上傳的檔案
儲存一筆新紀錄
顯示所有紀錄
常見問題
本章回顧

APPENDIX 附錄

附錄 A Browser Web API 的比較與選用建議
儲存資料
檔案上傳
通訊
擷取裝置的影像或聲音
語音互動

附錄 B 值得注意與追蹤的實驗性 Browser Web API
File System Access API
EyeDropper API
Compute Pressure API
HTML Sanitizer APIaskw PART1 認識 Browser Web API 與資料查詢

CH01 什麼是 Web API？
深入理解 Web API
常見問題
本章回顧

CH02 查閱與使用 Browser Web API 的必備知識
如何有效查閱 Browser Web API 官方文件
如何判斷瀏覽器支援情況與相容性
常見問題
本章回顧

CH03 Browser Web API 索引與功能整理
Browser Web API 分類與簡介（從 A 到 X）
本章回顧

PART2 網站定位與路線追蹤應用

CH04 用 Geolocation API 取得與追蹤使用者地理位置
Geolocation API 的核心功能
檢查瀏覽器是否支援 Geolocation API
使用 getCurrentPosition() 取得當前位置
出現錯誤訊息：Only request geolocation information in response to a user gesture.
拒絕權限後該如何重新啟用
在地圖上顯示使用者所在位置
使用 watchPosition() 追蹤使用者的地理位置
模擬移動功能
常見問題
小結
本章回顧

CH05 用 Geolocation API 和 Leaflet Routing Machine 實作叫車服務功能
從位置追蹤到路線導航的完整流程
用 Leaflet 與 Routing Machine 建構叫車服務
開始模擬：模擬司機移動的過程
停止模擬
範例畫面
常見問題
小結
本章回顧

PART3 裝置功能與媒體應用實作

CH06 使用〈audio〉打造音樂播放器
嵌入音訊檔案
客製化播放器
用 CSS 調整滑桿樣式
建立音樂播放控制功能
實作小技巧
常見問題
小結
本章回顧

CH07 用〈video〉實作影音播放功能
Video 標籤的基本功能
顯示影片字幕
自訂子母畫面
處理影片緩衝與播放狀態
根據時間點加入互動提示
影片播放完畢後觸發其它動作
常見問題
小結
本章回顧

CH08 使用 Screen Capture API 取得你的螢幕畫面
擷取螢幕畫面
擷取聲音
偵測分享狀態
怎麼手動停止分享？
常見問題
小結
本章回顧

PART4 網頁介面操作與互動

CH09 用 Drag and Drop API 拖曳網頁元素
Drag and Drop API 介紹
如何實現拖放功能？
Drag 拖放事件
Drag 運用範例
常見問題
小結
本章回顧

CH10 認識 History API：SPA 的關鍵技術之一
History API 做了什麼？
如何操作瀏覽器的歷史紀錄
實作 SPA 的頁面切換效果
非同步載入內容與深度連結應用
常見問題
小結
本章回顧

CH11 探索 Fullscreen API：從基礎到應用場景
請求和退出全螢幕模式
處理全螢幕狀態變化
在全螢幕模式調整樣式
單個元素或整頁變成全螢幕
替代方案
常見問題
小結
本章回顧

PART5 觀察與監控 DOM 的變化

CH12 如何使用 MutationObserver API 追蹤 DOM 的變化
如何使用 Mutation Observer 監聽 DOM 變動
MutationObserver API 基本範例
監控要動態載入的畫面
動態更新 UI
常見問題
小結
本章回顧

CH13 深入了解 Intersection Observer API 及其應用
為什麼需要 Intersection Observer？
Intersection Observer 的基本語法
Options 屬性
監聽目標元素
根據使用者瀏覽行為，觸發互動提示
根據滑動的頁面修改選單顏色
延遲載入 JavaScript
常見問題
小結
本章回顧

PART6 語音、聊天與 AI 互動

CH14 使用 Web Speech API 讓網頁聽得懂我們說的話
做一個基本的語音識別功能
持續監聽使用者的語音輸入
監聽語音輸入的更多事件
實作語音搜尋系統
常見問題
小結
本章回顧

CH15 使用 Web Speech API 讓網頁開口說話
基本用法介紹
SpeechSynthesisUtterance 屬性介紹
SpeechSynthesisUtterance 事件介紹
實作動態語音選擇器
更自然的語音效果
常見問題
小結
本章回顧

CH16 用 Web Speech API 與你的 AI 朋友互動聊天
實作一個 AI 聊天好友
實現上下文記憶
將 AI 回應轉為語音播放
常見問題
小結
本章回顧

PART7 通知功能與後台推播應用

CH17 使用 Web Notifications API 幫網站加入通知功能
Web Notifications API 介紹
請求通知權限
建立與顯示通知
使用者與通知的互動
使用 Web Notifications API 要注意的事
搭配 Permissions API 進行權限管理
常見問題
小結
本章回顧

CH18 Web Notifications API 搭配 Service Workers 發送通知
什麼是 Service Workers？
如何使用 Service Workers 發送通知
使用開發者工具模擬推播
使用 Push Companion 測試背景推播
常見問題
小結
本章回顧

CH19 Web Notifications API 結合 Google Cloud 的應用
Google Cloud 在通知系統中的角色
在 Google Cloud 建立專案
在 Firebase 建立 Messaging 服務
使用 Firebase Console 發送測試訊息
發送或排程通知
常見問題
小結
本章回顧

PART8 網站效能與背景執行緒應用

CH20 使用 Web Workers API 走出自己的路
Web Workers 的類型與使用情境
常見問題
小結
本章回顧

CH21 Web Workers API 的限制與效能優化處理
Web Workers 的限制
必須同源才能通訊
支援部分 JavaScript API
效能優化建議
什麼時候適合使用 Web Worker？
常見問題
小結
本章回顧

CH22 管理 Web Worker 的生命週期與資源
重用 Web Worker，避免浪費資源
使用 terminate() 方法關閉不再需要的 Worker
建立 Worker Pool，有效管理 Worker 資源
替每個 Worker 指定名稱，以便於除錯或管理
使用效率較高的數據結構
JSON 與 ArrayBuffer 的差別
常見問題
小結
本章回顧

PART9 檔案處理與本地端資料庫管理

CH23 File API 的架構與應用
File API 的構造
取得檔案資訊：File/FileList
讀取檔案內容：FileReader
Blob：建立自訂檔案資料
拖放與檔案預覽
常見問題
小結
本章回顧

CH24 另一種儲存資料的方式：IndexedDB API
IndexedDB API 的特性與使用場景
在瀏覽器檢視 IndexedDB 資料
IndexedDB 的資料庫架構與核心概念
建立與初始化資料庫
IndexedDB 的 Transaction 機制
IndexedDB CRUD 操作實作
常見問題
小結
本章回顧

PART10 安全與即時通訊

CH25 使用 Web Cryptography API 提高網頁應用的安全性
對稱式與非對稱式加密介紹
試著生成一組密鑰
使用 AES-GCM 加密與解密資料
使用 RSA 加密與解密資料
常見問題
小結
本章回顧

CH26 使用 Google Cloud Run 架設 WebSocket Server
自己架設 WebSocket Server 的原因
在本地端啟動 WebSocket Server 並進行測試
建立 Google Cloud Run 專案
WebSocket 連線的困難點
主動檢查 WebSocket 的連線狀態
常見問題
小結
本章回顧

PART11 Browser Web API 組合技

CH27 用 WebSocket API 和 Canvas API 實作多人白板服務
使用到的 Browser Web API
架構設計
使用 Node.js + Fastify + ws 模組進行 WebSocket 通訊
使用 Canvas 即時取得筆畫資訊
分配不同顏色的畫筆
顯示線上人數
常見問題
小結
本章回顧

CH28 結合 File API 與 Web Speech API 製作文件閱讀器
使用到的 Browser Web API
使用 Page Visibility API 判斷當前頁面的可見性狀態
文件閱讀器
建立變數
常見問題
本章回顧

CH29 製作情緒追蹤器，以更好地理解自己
使用到的 Browser Web API
打造自己的情緒追蹤器
建立 IndexedDB 資料庫結構
網頁載入時初始化並顯示紀錄
取得使用者當前位置
讀取使用者上傳的檔案
儲存一筆新紀錄
顯示所有紀錄
常見問題
本章回顧

APPENDIX 附錄

附錄 A Browser Web API 的比較與選用建議
儲存資料
檔案上傳
通訊
擷取裝置的影像或聲音
語音互動

附錄 B 值得注意與追蹤的實驗性 Browser Web API
File System Access API
EyeDropper API
Compute Pressure API
HTML Sanitizer API