PWA 簡介

PWA（Progressive Web Apps）不是特指某一項技術，而是應用多項技術來改善用户體驗的 Web App，為 Web App 提供類似 Native App 的用户體驗。
其核心技術包括 Web App Manifest，Web Push，Service Worker 和 Cache Api 等，用户體驗才是 PWA 的核心。

PWA 主要特點如下：

可靠 - 即使在網絡不穩定甚至斷網的環境下，也能瞬間加載並展現
用户體驗 - 快速響應，具有平滑的過渡動畫及用户操作的反饋
用户黏性 - 和 Native App 一樣，可以被添加到桌面，能接受離線通知，具有沉浸式的用户體驗

寫在前面

文章不具體講解 PWA 技術細節，如果對 PWA 技術感興趣，文末準備了一些資料，可以參考學習
此次調研目的並非為網站完整接入 PWA 技術，而是利用其緩存機制提升網站性能
主要用到的技術為 Service Worker + Cache Api

前端多級緩存模型

當瀏覽器想要獲取遠程的數據時，我們並不會立即動身（發送請求），在計算機領域，很多性能問題都會通過增加緩存來解決，前端也不例外。
和許多後端服務一樣，前端緩存也是多級的。

本地讀取階段，這個階段我們不會發起任何 HTTP 請求，只在本地讀取數據作為響應
HTTP request 階段，這個階段我們發起了 HTTP 請求，但是數據依然是從本地讀取。目前為止，我們可能還沒有發出一個真正的請求。這也意味着，在緩存檢查階段我們就會有很多機會將後續的性能問題扼殺在搖籃之中
真正請求階段，如果很不幸本地沒有任何有效數據，這時候才會發起真正的請求
前端多級緩存詳細流程圖如下：