前端三分鐘

什麼是喚醒鎖 (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/......

什麼是 Badging APIBadging API 讓 App 能夠顯示通知數字，不過通知數字的位置會依照平台的不同而有所差異。 常見是用來通知用戶，像是訊息或是推播數量都能夠透過這個通知數字來實現 Email 未讀、訊息未讀 待辦事項 遊戲任務 不需要任何使用者權限即可使用 支援 Windows、macOS、Chrome 81+、Edge 84+ Badging API (圖片......

什麼是 App Shell?App Shell 乍聽之下是一種技術，實際上是 Web App 架構模式 (Architectural Patterns)。 App Shell Model 這個架構模式目的是讓 Web App 可靠性以及在用戶開啟 App 後能像原生 App 一樣提供立即載入的效果。 對 Progressive Web App 來說，”shell” 可能包含形成基礎操作介面的......

什麼是 Service WorkersService Workers 的角色是位於 Web App 與網路連接中間的一層 “代理網路連接”，就像是秘書一樣負責將資料處理後再轉介給 App。 還記得第一次看到這個名詞是因為看 Progressive Web App，這裡比較新的觀念是可以幫助 web app 在網路較慢或是沒有連線時去使用快取資料。另外一個特性是 service worker ......