技術背景
大家都知道H5相比原生應用，無論是載入速度和使用者體驗都會差很多,具體原因有如下幾點：
- 留白時間過長。移動端網路非常不穩定，經常會出現弱網環境（如：電梯，地鐵，大山裡面），這樣會導致資源載入速度非常慢，留白時間相對原生會慢很多。
- 無法離線訪問。因為資源都線上上伺服器,每次訪問H5的頁面強烈依賴網路，原生因為資源都在應用包裡面,就算斷網也會給一個相對友好的展示介面和使用者提醒。
- 無法全屏訪問。H5絕大部分都是跟瀏覽打交道，但是各大瀏覽器廠商都會有一個討厭的頭部和一個討厭的尾部，導致使用者的可視區域大大被壓縮。原生大家都知道可視區域隨意控制。
- 無法訊息推送。
- 沒有自己的啟動圖示，每次都需要輸入網址或者依靠搜尋引擎引流。
這個時候拯救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帶來更加好的未來。