PWA-H5 Web App優化探索之路(Service Worker,Lighthouse)
PWA是什麼?
Progressive Web App 漸進式web應用程序,簡單來説,就是可以讓你的WEB App,帶來與原生App相媲美的用户體驗。。
為什麼要用PWA?
簡單來説,是為了web應用更好的用户體驗。
- 當你的web頁面處於離線或者弱網情況,可以調用預先緩存資源,使你的應用正常加載。
- 部分資源無需經過網絡,頁面秒開。
- 你的頁面可以被搜索引擎收錄。
- 可以通過message進行離線消息推送。
- 應用可以被添加到手機桌面,像原生應用一樣可以全屏,推送
怎麼用PWA?
- 使用HTTPS
- 使用Service Worker技術(下文有詳細介紹),實現離線加載技術
- 把我們需要離線的文件放到App Mainfest文件代碼中
PWA目前瀏覽器支持情況點擊直達兼容性查詢頁
不同平台分別最適合體驗 PWA 應用的瀏覽器:
Android:Chrome 瀏覽器 iOS:Safari 瀏覽器 Windows 10:Edge 瀏覽器 / Chrome 瀏覽器 / Stack 瀏覽器 macOS:Chrome 瀏覽器 / Stack 瀏覽器 Linux:Chrome 瀏覽器
關於pwa圖文介紹以及使用體驗的資料可參考
ServiceWorkerGlobalScope API
O(∩_∩)O
O(∩_∩)O
WEB App Mainfest
O(∩_∩)O
O(∩_∩)O
Service Worker 是什麼?
Service Worker 是瀏覽器獨立於當前網頁,在後台運行的一個腳本。作用有以下幾點
- 攔截和處理網絡請求,刷新頁面可以通過緩存,頁面秒開
- 使用Service Worker 在後台運行,實現處理大規模後台數據的功能,不影響前端頁面,數據處理同時可以和前端頁面進行通信
- 僅在激活情況下,才會針對系統事件抓取資源,非激活情況下,不佔用系統資源
Service Worker工具備註,使用下面兩個指令,可以查詢到我們已經啟動的,和瀏覽器內置的Service Worker
- chrome://serviceworker-internals/
- chrome://inspect/#service-workers
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
使用service-worker緩存頁面內容
首次加載
點擊刷新以後
使用service-worker發送消息
使用第一個窗口發送消息
我們在第二和第三個窗口都看到了第一個窗口發送的消息
關於上圖 service-worker緩存頁面,以及不同頁面發送message代碼地址
http://gitee.com/tangdd369098655/service_worker.git
查看當前網站是用哪個文件註冊的Service Worker
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
如何測試你的頁面性能?Lighthouse 前端性能優化測試工具
- 分析Web應用,收集各種應用指標,並進行評估,以此我們可以根據評估結果進行鍼對性優化,不斷提升用户體驗
- 目前官方提供了4種使用方式: - Chrome 開發者工具(DevTools) - Chrome 擴展 - Node CLI - Node Module
- 詳細文檔可以參考http://github.com/GoogleChrome/lighthouse
使用Chrome 開發者工具,接下來我們以手機淘寶為例,來看一下頁面性能
打開開發者工具-點擊 generate report,它會對頁面進行相關性能的檢查,最終生成報告
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
切換語言~~
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
各個方面得分情況
O(∩_∩)O
O(∩_∩)O
PWA分析報告
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
O(∩_∩)O
- 經過分析,我們可以得到 該案例關於PWA分析 如下結果
O(∩_∩)O
O(∩_∩)O
「其他文章」