Browser Web API 攻略大全：從開箱即用的實作範例開始，逐步掌握開發技巧（iThome鐵人賽系列書）
吳姿穎（Muki Wu）
- 出版商: 博碩 夏季書展 2書75折(部分除外)
- 出版日期: 2025-09-03
- 定價: $650
- 售價: 7.8 折 $507
- 語言: 繁體中文
- 頁數: 392
- ISBN: 6264142859
- ISBN-13: 9786264142854
-
相關分類:
前端開發
尚未上市，歡迎預購
相關主題
商品描述
深入探討 Browser Web API 的最佳實踐
快速將學到的技能應用到實際開發中
本書內容改編自第 16 屆 iThome 鐵人賽JavaScript 組冠軍系列文章《可愛又迷人的 Web API》。作者整合比賽期間累積的範例與心得，以「一個 Browser Web API 即一個主題」的模組化架構呈現，讓讀者不用按照章節閱讀，能依需求即翻即用。每章均包含核心概念、瀏覽器支援、常見錯誤、替代方案與完整實作，並附進階優化技巧，兼顧新手入門與資深開發者的深入探索。
本書收錄的 Browser Web API，涵蓋地理定位、語音輸入輸出、背景計算、離線資料庫、動畫與性能監測等多元領域。透過範例程式碼、實戰情境與效能調校，讀者可快速將功能落地至專案，同時學會權限、安全與跨瀏覽器相容要點。書中也設計了「一分鐘概覽」與「踩雷區（Tips）」欄位，讓你在零碎時間也能迅速掌握精華，遠離常見陷阱。書中也幫大家整理所有的 Browser Web API（包含正式發佈與實驗中版本），幫助各位快速了解它們的特色，並能定位所需的工具。
若你正在尋找一部能兼具速查手冊與系統化學習路徑的中文 Browser Web API 指南，本書將成為你工作桌旁不可或缺的最佳夥伴，助你在競爭激烈的前端領域快一步升級。
本書特色
✦ 實戰專案範例
從拆解需求到做出可執行的完整作品
✦ 圖解串接流程
圖解教學一看就懂新手也能輕鬆上手
✦ 主流兼容對策
搞定瀏覽器兼容跨平台體驗一致
✦ 開發最佳實務
傳授開發最佳實踐高效避坑不踩雷
目標讀者
● 對 JavaScript 有基礎認知，想知道 Browser Web API 能做到哪些運用的前端工程師
● 想深入瞭解 Browser Web API，並希望能實作在專案上的前端工程師
專業推薦
這本《Browser Web API 攻略大全》，算是對當代瀏覽器 API 做了一次巡禮！即便已累積多年前端實戰經驗，對瀏覽器能做什麼已有概念，閱讀過程中仍時有驚喜。像是我驚訝地發現：瀏覽器居然內建持續追蹤使用者 GPS 位置的功能、可以用子母畫面播影片、能錄製並分享螢幕畫面、監聽某個 DOM 元素是否被更動，有沒有進入可視範圍……，刷新我對當代瀏覽器能力的認知。無論是作為工具書查找，或完整閱讀拓展知識，都能幫助你充分利用瀏覽器功能，打造更好的網頁體驗。
──── 黑暗執行緒
這本書最大的價值在於，它不只教你怎麼用，更教你為什麼這樣做：許多人學習前端技術只是停留在表面，而 MUKI 會告訴你背後的原理。書中的語言通俗易懂，讓你在輕鬆閱讀的同時，吸收大量的知識；每一個概念都經過精心設計，讓你不會感到枯燥；內容與時俱進，從最新的 ES6 到各種 Web API，一應俱全。無論你是新手還是老手，都能從中獲得啟發。
──── 奶綠茶｜一個從 Flash 時代活到 AI 時代的前端工程師
我特別欣賞 MUKI 在每個 API 章節中設計的範例，兼顧簡潔與實用，不會流於複雜的「炫技」，也不會只是文件翻譯。這樣的風格，讓人讀來輕鬆，卻又收穫滿滿。如果你是剛踏入前端領域的開發者，它是你探索瀏覽器能力的最佳入門；如果你已經有一定經驗，這本書會幫你重構理解與思維，甚至激發你在互動應用上的靈感。誠摯推薦給每一位對網頁開發充滿熱情的朋友。
──── Will 保哥｜多奇數位創意 技術總監、Google Developer Expert、Microsoft MVP/RD
作者簡介
吳姿穎（Muki Wu）
一個喜歡研究手帳筆記術與時間管理，寫過 WordPress 與手帳書籍的前端工程師。從小學六年級開始製作網站到現在，依然專注於以使用者為中心的前端介面開發，擔任過學校（台大、北科大、世新大學）與企業教育訓練（中華電信、1111 人力銀行等）的前端講師，以及 WebConf、MOPCON、廣州 FEDAY 等的技術講者。
樂於學習新技術並分享知識，從 2008 年建立部落格 MUKI space* 至今，內容涵蓋前端技術文章、數位筆記軟體使用心得、AI 應用與讀書筆記。
歡迎一起交流：
部落格：https://muki.tw
粉絲團：MUKI SPACE
目錄大綱
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：從基礎到應用場景
請求和退出全螢幕模式
處理全螢幕狀態變化
在全螢幕模式調整樣式
單個元素或整頁變成全螢幕
替代方案
常見問題
小結
本章回顧
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
