企業(yè)級項(xiàng)目基于PWA緩存的最佳實(shí)踐

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

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

3、Stale-While-Revalidate)先走緩存，走完緩存發(fā)請求，請求的結(jié)果會用來更新緩存SW Strategies (Network-first)優(yōu)先走現(xiàn)網(wǎng)，現(xiàn)網(wǎng)超時時返回緩存SW Strategies (Cache-only)只走緩存SW Strategies (Network-only)只走現(xiàn)網(wǎng)PWA 業(yè)務(wù)接入情況 (Mobile) 基于離線包方案，緩存靜態(tài)資源PWA 業(yè)務(wù)接入情況 (Mobile) 基于離線包方案，緩存靜態(tài)資源 緩存靜態(tài)資源 接入后：+80ms PWA 業(yè)務(wù)接入情況 (PC)PWA 業(yè)務(wù)接入情況 (PC)PWA 業(yè)務(wù)接入情況 (PC)PWA 業(yè)務(wù)接入情況 (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 處理方式不一致在我們的現(xiàn)網(wǎng)數(shù)據(jù)中Disk Cache 50-70msDisk Cache1-5msMemory Cache 0-1ms結(jié)論建議靜態(tài)資源上 SW Cache非離線剛需，靜態(tài)資源不建議上 SW CacheSSR 方案SSR HTML Cache

5、(Browser Cache)Browser Cache 有緩存情況SSR HTML Cache (Browser Cache)Browser CacheBrowser Cache 無緩存情況無法及時更新修復(fù) 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 方案數(shù)據(jù)SSR 緩存方案靜態(tài)資源HTML策略使用 Cache-first使用 stale-while-revalidate思考如何快速新增/刪除/修改需要緩存的資源？ 緩存了一個有 BUG 的 html，由于緩存問題，如何快速修復(fù)迭代？還有沒有優(yōu)化空間？PWA+ PlatformSW Cache 命中率提升命中率就可以降低首屏耗時？如何提升？ 一級入口、二級入口？23%如何提升命中率 ?二級頁預(yù)緩存策略 預(yù)緩存靜態(tài)資源 預(yù)緩存 HTML 資源二次

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

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

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