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代碼地址

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