前端三分鐘

什麼是 Periodic Background Sync API透過在 service worker 搭配 Periodic Background Sync API 就可以做到定期背景同步資料的效果。 背景同步資料可以解決什麼問題，Progressive Web App 說穿了也只是網站，所以當遇到連線不良的時候總是會影響操作體驗。 一個正常的使用者歷程： 從口袋裡拿出手機 使用一下 Ap......

什麼是 Contact Picker API透過 Contact Picker API 網頁也可以像 Native App 一樣去選取用戶的聯絡人資訊，API 提供開發者去選擇一個或多個欄位資訊，反過來說 App 可以設計讓用戶只分享他們想分享的內容，更方便用戶去和家人、朋友做互動。舉例來說 Email 的 Progressive Web App 就可以整合 Contact Picker A......

什麼是 Web Share APIWeb App 透過 Web Share API 就能夠使用系統提供的分享功能，將連結、內容和文件分享給安裝在裝置上的其他應用 App。另外一方面只要透過將 App 配置 Web Share Target 相關設定也能夠接收其他 App 分享的內容。 怎麼使用 Web Share API用法上也是很簡單，也是只要瀏覽器有支援 navigator.share ......

什麼是喚醒鎖 (Screen Wake Lock API)?喚醒鎖 (Screen Wake Lock API) 讓 App 不會因為省電設定而關閉螢幕，透過這樣的設計 App 有了更多的彈性。舉例來說: 食譜的 App 就會需要在烹煮的過程中持續顯示 QR code 票證應該要在被掃描後螢幕才能被關閉 投影片展示過程中螢幕應該維持開啟 怎麼使用喚醒鎖 (Screen Wake Lock......

什麼是 Web NFC?NFC (Near Field Communication) 近場通訊是高頻 (13.56 MHz) 短距離無線通訊技術，只要距離 5-10 公分內 Web NFC 就能夠讀取和寫入 NFC 標籤，傳輸速率高達 424 kbit/s。 目前 Web NFC 只支援 NDEF，尚不支援 ISO-DEP、NFC-A/B、NFC-F、HCE。 Demo ......

什麼是 File System Access API?透過這個 File System Access API 就能透過程式操作本機上的檔案，舉例來說像是開啟或儲存檔案等，部分瀏覽器會需要給予相關的權限才能進行操作，除了開啟檔案 API 本身也提供了開啟目錄並列舉檔案列表的功能。 對 Progressive Web App 也會在某些情境需要可以存取和操作本機端的檔案，Google 的 Lab......

什麼是用戶端儲存 (Client-side storage)對一個 App 來說，為了達到某些目的，將相關資料存在用戶端是相對方便的，舉例來說 個人偏好設定，像是常用功能、顏色主題、字體大小 將前一次操作快取，像是紀錄購物車資料或是線上編輯器在斷線時先暫時將資料保存 不常改變的資料或靜態資源快取 離線操作所需要的檔案 通常用戶端的儲存和伺服器端的儲存會是一起搭配使用的，舉例來說當我們使用......

什麼是 Geolocation API?透過 Geolocation API 可以讓 Progressive Web App 存取用戶的位置，方便實作地理資訊相關應用。 怎麼使用 Geolocation API? 檢查支援度，然後針對支援的部分做漸進式增強，如果不支援的話可以使用 GEO IP 相關服務，雖然較不準確，但仍然有一定的參考價值。 https://get.geojs.io/v1/......