PWA 學習筆記 – 5:用 Firebase 做 Web Push
本篇大綱:用到的資源二、取得FCM金鑰三、新增manifest.json、firebase config、取得使用者的token、新增sw.js、註冊sw.js、存cookies、存firebase、發送web push、接收web push、補充資源
本篇大綱:用到的資源二、取得FCM金鑰三、新增manifest.json、firebase config、取得使用者的token、新增sw.js、註冊sw.js、存cookies、存firebase、發送web push、接收web push、補充資源
本篇大綱:Manifest.json參考資源、manifest.json是做什麼用的?manifest.json成員、關於「chrome主動提示加入主畫面」。manifest.json是在學PWA這塊時最簡單的部份,主要是建一支json檔就可以,相關的參數MDN上或是google一下就會看到。
本篇大綱:列出workbox可用的參數設定 -1 Route Requests -2 Route Requests + 自訂cache名稱 -3 改成debug模式 -4 cache來自於別的網域時 -5 快取的檔案加入檔案數量、期限的限制 -6 離線時也能向GA發送請求
本篇大綱:workbox CLI在做些什麼、用workbox CLI建立sw.js -1 安裝workbox CLI -2 存一支sw-config.js檔(看需求可跳過) -3 使用workbox小精靈,生成workbox-config.js檔 -4 用workbox-config.js檔,生出sw.js
本篇大綱:前言:PWA會是未來趨勢啊、推薦3篇優質教學文、關於「存到快取(cache)」的就我所知、實作:註冊sw.js、如何查看是否成功註冊、sw.js實作:寫一份sw.js檔、實作:用workbox建立sw.js、實測:頁面載入速度有比較快嗎?
文章中說有資歷的前端在面試時會遇到三個問題,能回答的話offer大概也到手了:1、用戶輸入URL回車之後,瀏覽器到底做了啥?2、頁面渲染的完整流程是怎樣的?3、前端性能優化有哪些經驗?坦白說,因為這三題我完全答不出來,覺得是很勸世的一篇文章啊,就認真的來看。
本篇大綱:本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時,看見他們頁面上的按鈕,就是非漸色轉到漸層色,並且還能帶有transition的過渡。看了一下他們的寫法,發現原理很簡單,就寫了一個在CodePen上,方便以後取用。
從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。
自從 Google 設計了 Material Desgin 後,表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,連 Netflix 都在用了,看來是個好設計,就決定自己來寫一個。
本篇大綱:本篇要解決的問題、介紹GCP(Google Cloud Platform)及使用介面、使用GCP App Engine、安裝Google Cloud SDK、app.yaml、Cloud Build API、3個注意事項五、結論及心得
本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。
GA大概是全球網站資料分析工具中市佔率最高的,所以AI提出的資訊會是大部份的網站都想知道的,像圖片中出現的Facebook來源狀況,跟網站的忠誠度,光看到標題就想點進去了。點進忠誠度這點,就看見以目前的網站數據,分析為什麼AI會覺得忠誠度降低的原因,並直接搭配圖表來說明。
前端工程師 August 的學習筆記 — solving problems, in simple ways.