前端三分鐘

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

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.

Linux 伺服器架站與問題排除

從系統配置到網站維運實戰指南

如何在 Linux 伺服器上高效架設網站並排除問題？實踐 Linux 伺服器網站架設的核心在於系統資源的精確配置與網路安全設定。高品質的架站路徑包含：1. 系統優化：針對伺服器記憶體優化，可透過建立 SWAP 檔案緩解卡頓；2. Nginx 配置教學：利用反向代理實現服務介接，並注意 SELinux 導致的權限報錯；3. Linux 網路設定：正確配置 UFW 防火牆與 Port 監聽（......

林彥成
2021-07-07 | 4 min.

GCP 雲端實戰攻略

開箱 GCE、Cloud Run、BigQuery、Dialogflow

什麼是 Google Cloud Platform (GCP)？Google Cloud Platform (GCP) 是 Google 提供的雲端運算服務套件，其核心價值在於提供與 Google 內部相同的強大基礎設施。針對網站架設，GCP 提供三種高品質路徑：1. Google Compute Engine (GCE)：提供高度自定義的虛擬機服務；2. Google Kubernetes......

林彥成
2021-06-29 | 5 min.