前端三分鐘

什麼是用戶端儲存 (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 ......

Web App 的 manifest 是一個 JSON 形式的配置檔，瀏覽器透過配置檔就會知道 Progressive Web App 該怎麼去安裝在用戶的電腦或手機裝置上，所以最基本的 manifest 會包含 App 的名稱、Icon、App 開啟時要顯示的 URL。 建立 manifest file命名上其實沒有特別規定，但通常會是 manifest.json 並且放置在專案的根目錄，......

加入主畫面 (Add to Home screen)加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS，可以看成是讓使用者將 Web App 進行 “安裝” 的動作，雖然實際上只是加入一個捷徑到桌面上，類似桌面版的我的最愛。 由於不是 PWA 的網站也可以做到加入主畫面，那 PWA 任務就是要將現有的 A2HS 做漸進式增強，安裝過後除了支援實作快取資源到本機也能夠......

Progressive Web App (PWA) 有三個概念 Progressive: 漸進增強 Web: 使用當下最新潮的 Web API App: 建立跨平台 Web 應用程式 使用當下最新潮的 Web API 用漸進增強的概念來建立跨平台 Web 應用程式。 目的是讓體驗、效能接近原生 App 接下來小編會帶著大家一起開箱一波 PWA，Progressive Web App ......