前端三分鐘

一起用三分鐘分享技術與知識

PWA Web NFC 標籤讀取實作

運用 NDEFReader 實作感應識別與資料寫入技術

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

林彥成
2021-09-19 | 3 min.

PWA 檔案系統存取實作

運用 API 讀取與寫入本機文件以強化編輯器功能

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

林彥成
2021-09-18 | 3 min.

PWA 用戶端儲存機制實作

運用 IndexedDB 與 Cache API 達成離線後備頁面

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

林彥成
2021-09-16 | 4 min.

PWA Geolocation 地理位置

運用瀏覽器 API 獲取座標資訊並實作地圖互動功能

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

林彥成
2021-09-15 | 2 min.

PWA 徽章通知實作教學

運用 App Badging API 為圖示增加動態計數顯示

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

林彥成
2021-09-10 | 2 min.

PWA App Shell 架構深鑽

運用外殼模型優化載入速度並提升離線穩定性

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

林彥成
2021-09-06 | 2 min.

PWA Service Worker 核心指南

離線快取與推播通知代理技術

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

林彥成
2021-09-05 | 4 min.

PWA Web App Manifest 配置

定義 JSON 屬性優化安裝提示與離線圖示顯示

什麼是 Web App Manifest？Web App Manifest 是一個以 JSON 格式編寫的配置檔案，它是瀏覽器識別網站為 Progressive Web App (PWA) 的關鍵依據。透過此檔案，開發者可以定義應用程式在用戶裝置上的呈現方式，包括 App 的名稱、圖示（Icon）、主題顏色、啟動頁面（start_url）以及顯示模式（如全螢幕或獨立視窗）。它讓 Web 應用......

林彥成
2021-09-04 | 4 min.

PWA 新增至主畫面實作

自定義 A2HS 提示介面以引導使用者完成安裝流程

什麼是 A2HS (新增至主畫面)？A2HS (Add to Home Screen) 是一種 Progressive Web App (PWA) 的核心功能，允許使用者將 Web 應用程式「安裝」到行動裝置的主畫面或電腦桌面上。與傳統書籤不同，透過 A2HS 安裝的 PWA 會擁有專屬的圖示（Icon）、啟動畫面（Splash Screen），並能以獨立視窗（Standalone）模式運行......

林彥成
2021-09-03 | 8 min.

PWA 漸進式網頁應用介紹

核心優點分析與提升行動端原生操作體驗路徑

什麼是 PWA (Progressive Web App)？PWA (漸進式網路應用程式) 是一種透過現代網頁技術（如 Service Worker 與 Web App Manifest）建構的應用程式，旨在提供兼具網頁跨平台優勢與原生 App（Native App）流暢體驗的方案。其核心包含三大支柱：Progressive（漸進式增強，確保在任何瀏覽器都能運作並隨效能增強體驗）、Web（基......

林彥成
2021-09-02 | 5 min.