前端三分鐘

什麼是 Screen Wake Lock API？Screen Wake Lock API (螢幕喚醒鎖 API) 是一種 Web API，允許 Progressive Web App (PWA) 在特定情境下請求防止裝置的螢幕變暗或關閉（熄滅）。這項技術對於需要使用者持續關注螢幕且無法頻繁操作裝置的場景至關重要，例如：閱讀電子食譜、掃描 QR Code 票證、投影片演示或車內導航。透過 n......

什麼是 Web NFC API？Web NFC API 是一種 Web API，允許 Progressive Web App (PWA) 在使用者裝置靠近 NFC 標籤（通常距離 5-10 公分）時，讀取或寫入 NDEF (NFC Data Exchange Format) 格式的資料。透過 NDEFReader 介面，網頁應用程式可以實現如博物館展品導覽、庫存盤點、或是馬拉松晶片感應等功能......

什麼是 File System Access API？File System Access API 是一種現代 Web API，允許 Progressive Web App (PWA) 直接讀取、寫入或管理使用者本機裝置上的檔案與目錄。這項技術打破了傳統網頁只能透過下載或上傳來操作檔案的限制，讓 Web 應用能像桌面軟體（如 VS Code、Photoshop）一樣提供「開啟檔案」、「儲存修......

什麼是用戶端儲存與離線後備頁面？用戶端儲存 (Client-side storage) 是指 Web 應用程式將資料（如偏好設定、靜態資源或離線檔案）直接儲存在使用者瀏覽器中的技術，主要包含 Web Storage (LocalStorage)、Cache API 與 IndexedDB。而 離線後備頁面 (Offline Fallback Page) 則是利用 Service Worker......

什麼是 Geolocation API？Geolocation API 是一種 Web API，允許 Progressive Web App (PWA) 請求並獲取使用者裝置的地理位置資訊（通常為經緯度座標）。透過這項技術，網頁應用程式能提供如地圖導航、周邊商家搜尋、在地氣象顯示或即時路徑追蹤等功能。該 API 遵循「權限請求」機制，瀏覽器會在存取前徵詢使用者同意，且基於隱私與安全考量，僅限......

什麼是 App Badging API？App Badging API 是一種 Web API，允許已安裝的 Progressive Web App (PWA) 在應用程式圖示上顯示「徽章」（Badge），通常表現為一個小數字或圓點。這項功能旨在模仿原生 App 的通知機制，用於提醒使用者有未讀訊息、待辦事項或系統更新，而無需開啟 App 或發送顯眼的推播通知。App Badging API......

什麼是 App Shell Model？App Shell Model (應用程式外殼模型) 是一種用於建構 Progressive Web App (PWA) 的核心架構模式。它的核心理念是將網頁的「基礎 UI 結構」（即 Shell，包含 HTML、CSS 和基本的 JS）與「動態內容」分離。Shell 部分會透過 Service Worker 被預先快取在使用者裝置上，確保在下次開啟時......

什麼是 Service Worker？Service Worker 是一種執行於瀏覽器背景且獨立於網頁線程的腳本（Script），扮演著 Web App 與網路連接之間的「網路代理」角色。它的核心功能是攔截並處理網路請求，開發者可以藉此精確控制快取機制，實現網頁在弱網甚至離線環境下的正常運作。此外，由於它具備背景執行能力，Service Worker 也是實現 Push Notificati......