前端三分鐘

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

PWA 介面外觀優化實務

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

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

樂天 24 PWA 案例研究

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

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

推播通知行為模式指南

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

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

Web Push 推播通知實作指南

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

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



PWA Web Notifications 通知

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

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

PWA Idle Detection 閒置偵測

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

什麼是 Idle Detection API？Idle Detection API 是一種 Web API，允許 Progressive Web App (PWA) 偵測使用者是否處於閒置狀態（Idle），或是其裝置螢幕是否已鎖定。它不僅能監控滑鼠、鍵盤與觸控操作的停止，還能偵測作業系統級別的狀態變更。透過 IdleDetector 介面，開發者可以在使用者離開時自動將通訊狀態改為「離開」、......
me
林彥成
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 在背景定期從伺服器抓取最新資料。其核心目標在於優化弱網或無網路環境下的使用者體驗，例如：在網......
me
林彥成
2021-09-23 | 3 min.

PWA Contact Picker 聯絡人實作

實作行動裝置通訊錄選取機制並優化分享流程

什麼是 Contact Picker API？Contact Picker API 是一種 Web API，允許 Progressive Web App (PWA) 安全地請求存取使用者的本機通訊錄資訊（如姓名、電話、Email 與地址）。與傳統方法不同，這項 API 遵循「隱私優先」原則：瀏覽器會彈出系統原生的選取介面，使用者可以逐一勾選想要分享的聯絡人，而非一次性將整個通訊錄曝露給網頁。......
me
林彥成
2021-09-22 | 2 min.



PWA Web Share 雙向分享

實作 API 介接達成行動裝置應用程式內容交換

什麼是 Web Share API？Web Share API 是一組讓 Web 應用程式能與作業系統原生分享機制互動的介面。它包含兩個面向：Web Share（主動分享），允許網頁透過 navigator.share() 呼叫系統分享選單，將文字、連結或檔案傳送給其他 App（如 Line、Messenger）；以及 Web Share Target（接收分享），允許已安裝的 PWA 在 ......
me
林彥成
2021-09-21 | 2 min.

PWA Wake Lock 螢幕長亮實作

實作 API 防止裝置進入休眠以優化閱讀體驗

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

站內搜尋
文章分類
最新的文章