前端三分鐘

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

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

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

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

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

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

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

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