前端三分鐘

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

推播通知行為模式指南

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

什麼是 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.

PWA Contact Picker 聯絡人實作

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

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

林彥成
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 在 ......

林彥成
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......

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

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.