PWA-H5 Web App優化探索之路(Service Worker,Lighthouse)

語言: CN / TW / HK

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圖文介紹以及使用體驗的資料可參考

全平臺的輕量體驗: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程式碼地址

https://gitee.com/tangdd369098655/service_worker.git

檢視當前網站是用哪個檔案註冊的Service Worker

O(∩_∩)O

O(∩_∩)O

O(∩_∩)O

如何測試你的頁面效能?Lighthouse 前端效能優化測試工具

  • 分析Web應用,收集各種應用指標,並進行評估,以此我們可以根據評估結果進行鍼對性優化,不斷提升使用者體驗
  • 目前官方提供了4種使用方式: - Chrome 開發者工具(DevTools) - Chrome 擴充套件 - Node CLI - Node Module
  • 詳細文件可以參考https://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

在這裡插入圖片描述