企業(yè)級項目基于PWA緩存的最佳實踐

1、企業(yè)級項目基于PWA緩存的最佳實踐技術創(chuàng)新，變革未來業(yè)務現狀01 |CURRENT SOLUTIONPWA 緩存策略02 |CACHE STRATEGIESSSR 方案03 |SERVER RENDER SOLUTIONCSR 方案04 |CLIENT RENDER SOLUTION更多場景05 |OTHER FEATURES業(yè)務現狀業(yè)務現狀800 ms1500 ms業(yè)務現狀 手Q優(yōu)化策略靜態(tài)資源緩存方案首屏 HTML 緩存方案diff 更新800 ms業(yè)務現狀 - 非手Q優(yōu)化策略React 同構 SSRService Cache業(yè)務的使用場景復雜（手q, 微信, 瀏覽器, 微博）針對性優(yōu)化成

2、本高1500 ms業(yè)務現狀 - PWA場景覆蓋并發(fā)限制更新機制儲存空間PWA 緩存策略PWA SW 未安裝狀態(tài)PWA SW 已安裝狀態(tài)緩存策略 Cache-first：有緩存的時候返回緩存，沒有緩存才會去請求并且把請求結果緩存 Stale-while-revalidate：如果有可用的緩存版本，則使用該版本，但下次會獲取更新。 Network-first：現網超時后返回緩存 Cache-only：只讀取緩存，沒有就失敗了 Network-only：只請求線上，不讀寫緩存 有緩存的時候返回緩存，沒有緩存時請求現網SW Strategies (Cache-first)SW Strategies (

3、Stale-While-Revalidate)先走緩存，走完緩存發(fā)請求，請求的結果會用來更新緩存SW Strategies (Network-first)優(yōu)先走現網，現網超時時返回緩存SW Strategies (Cache-only)只走緩存SW Strategies (Network-only)只走現網PWA 業(yè)務接入情況 (Mobile) 基于離線包方案，緩存靜態(tài)資源PWA 業(yè)務接入情況 (Mobile) 基于離線包方案，緩存靜態(tài)資源 緩存靜態(tài)資源 接入后：+80ms PWA 業(yè)務接入情況 (PC)PWA 業(yè)務接入情況 (PC)PWA 業(yè)務接入情況 (PC)PWA 業(yè)務接入情況 (PC)

4、 緩存靜態(tài)資源 接入后：+80ms 優(yōu)先返回 SW Cache (Chrome 71 前策略)PWA SW Cache(Cache-race) 在SW中同時發(fā)起online與SW Cache請求，哪個快返回哪個耗時沒有變化PWA SW Cache(Cache-race)PWA 靜態(tài)緩存策略移動端PC端APP 對 Browser Cache 處理方式不一致在我們的現網數據中Disk Cache 50-70msDisk Cache1-5msMemory Cache 0-1ms結論建議靜態(tài)資源上 SW Cache非離線剛需，靜態(tài)資源不建議上 SW CacheSSR 方案SSR HTML Cache

5、(Browser Cache)Browser Cache 有緩存情況SSR HTML Cache (Browser Cache)Browser CacheBrowser Cache 無緩存情況無法及時更新修復 BUG！Browser Cache with BUGSSR HTML Cache (Browser Cache)Search in CacheReturn HTMLUpdate HTMLpostMessagereturn stateSSR HTML Cache (SW Cache)SW Cache (The second time)SSR HTML Cache (SW Cache)SW

6、Cache with BUGSSR 緩存方案靜態(tài)資源HTML策略使用 Cache-first使用 stale-while-revalidateSSR 方案數據SSR 緩存方案靜態(tài)資源HTML策略使用 Cache-first使用 stale-while-revalidate思考如何快速新增/刪除/修改需要緩存的資源？ 緩存了一個有 BUG 的 html，由于緩存問題，如何快速修復迭代？還有沒有優(yōu)化空間？PWA+ PlatformSW Cache 命中率提升命中率就可以降低首屏耗時？如何提升？ 一級入口、二級入口？23%如何提升命中率 ?二級頁預緩存策略 預緩存靜態(tài)資源 預緩存 HTML 資源二次

7、用戶命中率二次用戶未命中的原因？不支持 SWSW 沒注冊完成Cache 存儲空間滿了，無法進行緩存設置過期時間緩存空間滿時，先刪除緩存的圖片，再重試首次用戶如何覆蓋？資源預緩存策略 一級入口預緩存二級頁面資源CSSJS資源預緩存策略 思考頁面資源變更，如何及時更新？一級頁面關聯(lián)的二級頁面比較多？每次只能發(fā)布來進行Config修改？CSSJS 一級入口預緩存二級頁面資源 構建打通 平臺關聯(lián) 業(yè)務可關聯(lián)多個 ID 根據當前 ID，PWA+ 平臺下發(fā)其綁定業(yè)務 ID 相對應的資源文件PWA+ 預緩存策略PWA+ 預緩存策略ID: 1ID: 3HTML,JS,CSSHTML,JS,CSSHTML,JS

8、,CSS二級頁面 SW 預注冊策略 SW可以跨頁面注冊 在一級頁面預注冊二級頁面的 SW，第一次就能命中二級頁面 SWPageOnline一級頁面 - 頭部注冊方案一級頁面 - 頭部注冊方案關鍵在于 HTML 主文檔解析時間和 SW 注冊+網絡請求時間本地驗證，html 主文檔解析時間約為 600ms，而 sw 注冊的平均時間在 1000ms 左右SW Cache 命中率71%23%PWA+ (SSR優(yōu)化方案) 二級頁面預注冊方案 前置頁面，提前注冊二級頁面的SW，同時通過下發(fā)配置， 預加載需要緩存的資源，如html、js、cssPWA+ (SSR優(yōu)化方案) 一級頁面預加載方案 （客戶端支持）

9、進入APP打開空的webview，通過下發(fā)配置，預加載一級頁面必須的資源空白 webview 二級頁面預注冊方案 前置頁面，提前注冊二級頁面的SW，同時通過下發(fā)配置， 預加載需要緩存的資源，如html、js、cssPWA+ (SSR優(yōu)化方案) 1.5s - 1.28s - 1s - 0.7s 一級頁面預加載方案 （客戶端支持）進入APP打開空的webview，通過下發(fā)配置，預加載一級頁面必須的資源 二級頁面預注冊方案 前置頁面，提前注冊二級頁面的SW，同時通過下發(fā)配置， 預加載需要緩存的資源，如html、js、cssCSR 方案CSR HTML Cache (SW Cache)在渲染完成后，我們將頁面的 outerHTML 取出，并通過 postmessage 方法將其傳給 SWFirst Time VisitSearch in CacheReturn HTMLCSR- (HTML Cache)Second Time Visit二次進入優(yōu)先顯示緩存HTML更新HTML模板再次進入先顯示原始HTML模板緩存帶數據的HTML第三次訪問會白屏一下，如何解決？CSR- (HTML Cache Update) Puppeteer 能做什么？ 如