前端三分鐘

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

PWA 上架 Play Store 實戰

用 PWABuilder 封裝並提交應用

什麼是 PWA 上架與 TWA？PWA 上架是指將符合 Progressive Web App 標準的網頁，透過封裝工具轉化為原生應用程式格式（如 Android 的 .apk 或 .aab），以便發布至 Google Play Store、Microsoft Store 等應用程式市集的過程。其核心技術為 Trusted Web Activity (TWA)，這是一種基於 Chrome ......

林彥成
2021-10-04 | 3 min.

PWA 效能稽核完全指南

運用 Lighthouse 評估漸進式指標並優化可靠性

什麼是 PWA 稽核與 Lighthouse？PWA 稽核 (PWA Audit) 是指透過自動化工具對 Web 應用程式進行全面檢測，以確保其符合效能、可靠性、可安裝性與無障礙等關鍵指標的過程。而 Lighthouse 則是 Google 開發的最核心工具，整合於 Chrome 開發者工具（DevTools）中。它能模擬行動裝置環境，測量如 First Meaningful Paint (......

林彥成
2021-10-03 | 4 min.

PWA App Shortcuts 捷徑實作

增加長按圖示之快速啟動選單提升導航效率

什麼是 App Shortcuts？App Shortcuts (應用程式捷徑) 是 Progressive Web App (PWA) 的一項功能，允許開發者在 Web App 的圖示上提供一個「快速啟動選單」。當使用者在行動裝置主畫面上長按圖示，或在電腦工作列上按右鍵時，會彈出預先定義的功能捷徑。這項功能的技術核心在於 Web App Manifest 中的 shortcuts 屬性，它......

林彥成
2021-10-02 | 3 min.

PWA 介面外觀優化實務

調整系統主題色與啟動畫面以模擬原生 App 質感

什麼是 PWA 介面外觀優化 (Platform Look and Feel)？PWA 介面外觀優化是指透過網頁技術（CSS 與 JavaScript）讓 Progressive Web App 的視覺呈現與操作手感無限接近原生 App (Native App) 的過程。其核心策略包含：利用 Web App Manifest 配置 display 屬性以實現全螢幕或獨立視窗運行、透過 Me......

林彥成
2021-10-01 | 4 min.

樂天 24 PWA 案例研究

導入後提升用戶留存率與轉換率之實戰數據

樂天 24 PWA 案例成功的核心是什麼？樂天 24 (Rakuten 24) 的 PWA 案例研究展示了 Progressive Web App 在電子商務領域的巨大潛力。其成功核心在於結合了 A2HS (新增至主畫面) 降低使用者回訪門檻，以及利用 Workbox 實作精確的離線快取策略（如 cache-first 與 stale-while-revalidate），確保在弱網環境下依然......

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

推播通知行為模式指南

分析事件流程與使用者互動之最佳實踐策略

什麼是 PWA 通知行為與事件處理？PWA 通知行為 (Notification Behavior) 是指 Progressive Web App 在發送推播通知時，針對通知的堆疊方式、提醒頻率與互動反應所進行的邏輯設定。透過 Service Worker 監聽 push 與 notificationclick 事件，開發者可以實作 Tag (通知分組) 以避免訊息洗版、Actions (動......

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

Web Push 推播通知實作指南

整合前後端機制實現高品質之訊息觸及策略

什麼是 Web Push Notification？Web Push Notification (網頁推播通知) 是一種結合 Push API 與 Notifications API 的技術，允許網站伺服器向使用者的瀏覽器發送即時訊息，即使該網頁目前已關閉。其運作依賴於 Service Worker 在背景持續監聽，並透過 VAPID (Voluntary Application Serve......

林彥成
2021-09-26 | 7 min.

PWA Web Notifications 通知

實作權限請求與消息提示機制提升用戶回訪率

什麼是 Web Notifications API？Web Notifications API 是一種允許網頁應用程式（特別是 PWA）向使用者發送系統級通知的技術。無論使用者當前是否正在瀏覽該網站，只要瀏覽器仍在執行（且已註冊 Service Worker），通知就能以彈窗的形式出現在電腦桌面或行動裝置的通知列中。這項 API 的核心在於 Notification 物件，它支援豐富的視覺配......

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

PWA Idle Detection 閒置偵測

實作狀態感知機制以優化背景資源消耗與安全性

什麼是 Idle Detection API？Idle Detection API 是一種 Web API，允許 Progressive Web App (PWA) 偵測使用者是否處於閒置狀態（Idle），或是其裝置螢幕是否已鎖定。它不僅能監控滑鼠、鍵盤與觸控操作的停止，還能偵測作業系統級別的狀態變更。透過 IdleDetector 介面，開發者可以在使用者離開時自動將通訊狀態改為「離開」、......

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

PWA 背景同步技術實作

運用 Periodic Sync API 確保在網路不穩時資料更新

什麼是 PWA 背景同步 (Periodic Background Sync)？PWA 背景同步 (Periodic Background Sync) 是一種 Web API，允許 Progressive Web App (PWA) 在使用者未開啟網頁的情況下，仍能透過 Service Worker 在背景定期從伺服器抓取最新資料。其核心目標在於優化弱網或無網路環境下的使用者體驗，例如：在網......

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