前端三分鐘

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

通常推薦用 Linux 架設網頁伺服器，作業系統則推薦使用 CentOS 或是 Ubuntu。架站最快方式是安裝 Nginx 並配置前後端相關服務。Nginx 的用途主要提供反向代理，方便我們進行服務界接和相關路徑設定，也提供部屬靜態網頁的簡易設定，更多相關的設定歡迎參考我之前寫過的 常用的 Nginx Config 與相關指令教學。 在架設完不管是地端或是雲端的伺服器後，通常會遇到五個問題......

這次參加 GCP Cloud Study JAM 2021 體驗前後服務架設、Google Assistant、BigQuery 相關實作，值得一提的是 GCP 雖然提供圖形化管理介面，但大多功能都能用指令取代，這也代表相關配置與流程能透過程式碼來進行控管，進而降低錯誤的發生機率，更特別的地方是這次體驗的過程中，發現課程內容幾乎都是用 Cloud Shell 下指令的步驟當做教學。 一個 ......