PWA常見的緩存策略

技術背景

你們都知道H5相比原生應用，不管是加載速度和用戶體驗都會差不少,具體緣由有以下幾點：

1. 留白時間過長。移動端網絡很是不穩定，常常會出現弱網環境（如：電梯，地鐵，大山裏面），這樣會致使資源加載速度很是慢，留白時間相對原生會慢不少。
2. 沒法離線訪問。由於資源都在線上服務器,每次訪問H5的頁面強烈依賴網絡，原生由於資源都在應用包裏面,就算斷網也會給一個相對友好的展現界面和用戶提醒。
3. 沒法全屏訪問。H5絕大部分都是跟瀏覽打交道，可是各大瀏覽器廠商都會有一個討厭的頭部和一個討厭的尾部，致使用戶的可視區域大大被壓縮。原生你們都知道可視區域隨意控制。
4. 沒法消息推送。
5. 沒有本身的啓動圖標，每次都須要輸入網址或者依靠搜索引擎引流。

這個時候拯救H5的英雄就出現了，他就是PWA。

什麼是PWA

PWA全稱是: Progressive Web Apps(漸進式網頁應用)。這是 2016 年，Google I/O 大會上提出一個下一代web應用的概念。這並非描述一個技術，而是一些技術的合集,能讓你在使用 Web的時候感受像是在使用 APP。

PWA能幹什麼

• 消息推送
• 主屏ICON，全屏訪問
• 離線存儲

是否是跟原生就很像了？本文要寫的主要是離線存儲也就是緩存這一塊的內容，消息推送和主屏幕ICON之後再講。

pwa緩存的原理

爲何能實現緩存或者叫離線存儲？核心就是利用瀏覽器service-worker另啓一個線程，這個線程負責去監聽全部https請求（注意是https）,當發現某些資源是須要緩存下來的他會把資源拉取到瀏覽器本地，訪問的時候攔截請求，不走網絡請求，直接讀取本地資源。這樣資源至關於都是用戶本地的資源,響應速度確定飛快，還有就是資源都在用戶瀏覽器裏面，就算斷了網,資源也都是能正常訪問。

pwa緩存到底有多快

下面是現有PLUS會員業務中的同一個頁面pwa緩存和非pwa緩存加載資源的對比圖：

下圖是3G網絡不用PWA緩存的資源請求時間：

下圖是3G網絡採用PWA緩存的資源請求時間：

下圖是4G網絡不用PWA緩存的資源請求時間：

下圖是4G網絡採用PWA緩存的資源請求時間：

採用PWA緩存和不採用PWA緩存數據對比:

	3G不用PWA緩存	3G採用PWA緩存	4G不採用PWA緩存	4G採用PWA緩存
頁面加載時間	4.16s	989ms	1.8s	975ms
單個資源 平均加載時間	1s左右	60ms左右	550ms左右	60ms左右

從上面數據能夠看出來，pwa緩存的提速效果是很是明顯，能保證你的頁面在弱網環境下秒開，資源大部分都是在50毫秒左右的的響應時間。咱們在safari瀏覽器測試的響應時間更加快速，基本都是在15ms左右!!!

pwa緩存的緩存策略

上面說到某些資源是須要緩存。緩存多長時間？是永遠走緩存仍是永遠走網絡？仍是一些特定的緩存策略的？下面介紹常見用的幾種緩存策略：

cache-first

Cache-First策略會在有緩存的時候返回緩存，沒有緩存纔會去請求而且把請求結果緩存。也就是說，第一次頁面加載跟普通頁面加載沒有任何區別的，第二次訪問的資源是直接走了本地緩存數據的。

無緩存加載流程圖

有緩存加載流程圖

這種策略適用於:css,js,背景圖片，這種實時變化頻率比較低的靜態資源比較適合！這種策略有一種很差的地方就是，緩存可能一隻存在你得瀏覽器，若是發現某些文件須要替換，這個時候就依賴發版要不緩存就一直存在。有什麼好的辦法嗎？配置緩存時間能夠避免這種問題，定一個時間更新一次緩存。好比一個小時，或者三個小時，也能夠經過緩存某些變更頻率比較低接口的數據，這個時間主要看本身的業務需求了。（PS：新的版本改爲Service-Worker一天會主動拉新一次。）

network-first

network-first 是一個比較複雜的策略。資源優先走網絡，成功之後會把資源添加到緩存裏面，當發現網失敗就會回退讀取緩存。這裏面有一個點就是，多長時間算網絡請求失敗？這時候就須要配置一個超時時間，若是不配置回退緩存的時間就會比較長。這個時間根據自身項目而定。

這種策略適用於：頻繁更新的資源，好比天氣的數據，文章,遊戲排行榜的接口資源，正常狀況下跟普通網頁沒有任何區別，當出現弱網或者斷網資源響應時間比較長用戶體驗比價差的狀況下給的一種資源回退策略，這種方式能夠提升弱網環境下的用戶體驗。

stale-while-revalidate

這種策略比較接近cache-first,他們的區別在於他會先走緩存，走完緩存之後它會發出請求，請求的結果會用來更新緩存，也就是說你的下一次訪問的若是時間足夠請求返回的話，你就能拿到最新的數據了。

適合於:頻繁更新最新版本並不是必需的資源，html,頭像。

cache-only

只會去緩存裏拿數據，緩存沒有就失敗了。

這種很是簡單應用場景可能就是一萬年不變的靜態頁面可能比較適合。

network-only

network-only 只請求線上，不讀寫緩存。

這種策略的應用場景很是少，特殊狀況下偶爾能用用吧，當發現線上的緩存失控，在這種緊急狀況下所有不走緩存，所有走網絡一種緊急應對狀況吧。

以上就是經常使用的五中緩存策略,不一樣的場景對應不一樣的緩存策略，如何去編寫這些策略或者如何去生成這些策略會在接下來的文章再去詳解

pwa的將來

如今國內的瀏覽器廠商最新的版本都支持PWA的service-worker 緩存這一塊，之前吐槽的IOS不會支持，可是在最新版本的IOS11.3也支持service-worker了。

pwa是一堆技術的合集，app shell,消息推送，單頁式的應用都有包含，緩存只是其中的一部分，還有不少技術須要咱們去探索去實踐，相信這項技術會給H5帶來更加好的將來。