Browser Web API攻略大全: 從開箱即用的實作範例開始, 逐步掌握開發技巧 | 誠品線上

Browser Web API攻略大全: 從開箱即用的實作範例開始, 逐步掌握開發技巧

內容簡介

內容簡介 本書特色 ✦ 實戰專案範例 從拆解需求到做出可執行的完整作品 ✦ 圖解串接流程 圖解教學一看就懂新手也能輕鬆上手 ✦ 主流兼容對策 搞定瀏覽器兼容跨平台體驗一致 ✦ 開發最佳實務 傳授開發最佳實踐高效避坑不踩雷 本書以「一個Browser Web API 即一個主題」的模組化架構呈現，依照需求即翻即用。每章均包含核心概念、瀏覽器支援、常見錯誤、替代方案與完整實作，並附進階優化技巧，兼顧新手入門與資深開發者的深入探索。深入探討 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，並希望能實作在專案上的前端工程師

作者介紹

作者介紹 吳姿穎（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：從基礎到應用場景 請求和退出全螢幕模式 處理全螢幕狀態變化 在全螢幕模式調整樣式 單個元素或整頁變成全螢幕 替代方案 常見問題 小結 本章回顧 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

商品規格

試閱文字

推薦序 : 專業推薦

這本《Browser Web API 攻略大全》，算是對當代瀏覽器 API 做了一次巡禮！即便已累積多年前端實戰經驗，對瀏覽器能做什麼已有概念，閱讀過程中仍時有驚喜。像是我驚訝地發現：瀏覽器居然內建持續追蹤使用者 GPS 位置的功能、可以用子母畫面播影片、能錄製並分享螢幕畫面、監聽某個 DOM 元素是否被更動，有沒有進入可視範圍……，刷新我對當代瀏覽器能力的認知。無論是作為工具書查找，或完整閱讀拓展知識，都能幫助你充分利用瀏覽器功能，打造更好的網頁體驗。
──── 黑暗執行緒


這本書最大的價值在於，它不只教你怎麼用，更教你為什麼這樣做：許多人學習前端技術只是停留在表面，而 MUKI 會告訴你背後的原理。書中的語言通俗易懂，讓你在輕鬆閱讀的同時，吸收大量的知識；每一個概念都經過精心設計，讓你不會感到枯燥；內容與時俱進，從最新的 ES6 到各種 Web API，一應俱全。無論你是新手還是老手，都能從中獲得啟發。
──── 奶綠茶｜一個從 Flash 時代活到 AI 時代的前端工程師


我特別欣賞 MUKI 在每個 API 章節中設計的範例，兼顧簡潔與實用，不會流於複雜的「炫技」，也不會只是文件翻譯。這樣的風格，讓人讀來輕鬆，卻又收穫滿滿。如果你是剛踏入前端領域的開發者，它是你探索瀏覽器能力的最佳入門；如果你已經有一定經驗，這本書會幫你重構理解與思維，甚至激發你在互動應用上的靈感。誠摯推薦給每一位對網頁開發充滿熱情的朋友。
──── Will 保哥｜多奇數位創意 技術總監、Google Developer Expert、Microsoft MVP/RD

最佳賣點

最佳賣點 : 本書特色
✦ 實戰專案範例
從拆解需求到做出可執行的完整作品
✦ 圖解串接流程
圖解教學一看就懂新手也能輕鬆上手

活動

• 10/16前 全站滿$1,600折$150
• 10/16前 全站滿$2,800折$300