接續前面效能優化，想要了解一下快取

什麼是快取？

前面有提到快取的目的是希望可以減少伺服器的壓力、縮短載入時間，把已經下載過或計算過的東西保存起來，下次需要時直接用，不必重新請求或計算

以下介紹幾種快取和一些觀念

HTTP Cache

• Cache-Control ：

  Cache-Control: max-age=60
  

  代表資源可以存在快取60秒，如果超過60秒後就要重新發送新的請求了

  • Cache-Control: no-store ：表示不要保留任何東西在快取，要每次都要去server請求。例如：一些比較私密的資料或是經常變動的內容

• Etag：

  • 相同的內容會產生一個獨一無二的etag
  • 流程：

    • 伺服器回應時會帶上一個etag讓瀏覽器存起來

      Cache-Control: max-age=6000
      ETag: "1234567890abcd99cc1d2ac91123"
      

    • 快取時效過後，會帶上If-None-Match

      If-None-Match: "1234567890abcd99cc1d2ac91123"
      

      伺服器會判斷這個etag，若判斷沒變，就直接回快取拿資源，如果不同的話就要在重新向server請求

• 其他：

  • Last-Modified: 告訴瀏覽器這份資源最後修改時間
  • If-Modified-Since: 下次請求時帶上去，伺服器判斷如果沒更新，就回 304 Not Modified

Server Worker Cache

• 特性：

  • 可以依照需求設定不同自訂的快取策略
  • 可以離線瀏覽
  • 讀取更快

• PWA (Progressive Web App)

  • PWA是一種讓網站像App一樣的技術
  • 透過一個程式碼，可以在不同平台運行
  • 可以離線運行（例如：Google Docs 斷網後仍能編輯，等上網時再同步）

  ---

• 跟 HTTP Cache 不同的是：

  • Service Workers 的 Cache 的優先級別高於 HTTP Caching
  • HTTP Cache → 主要由瀏覽器自動控制
  • Service Worker Cache → 由開發者透過程式碼來決定什麼要存、什麼時候更新

  ---

• 使用基本流程：

  • Register:

    瀏覽器偵測到你的網站有service worker腳本來註冊（通常是sw.js )

  • Install:

    建立快取，會在 background 啟動並安裝一個Service Worker，同時也會把一些必要的檔案先快取下來（一些靜態資源）

  • Activate:

    舊快取清理、新版本啟用

  • Fetch:

    當使用者請求資源時，攔截使用者發出的請求，決定要回快取還是去抓新的

• 常見策略：
  • Cache First（快取優先）
    • 先用快取，若沒有才去抓
    • 適合：字型、Logo、JS、CSS 這些不常變的資源
  • Network First（網路優先）
    • 先去抓最新的，如果失敗（例如斷網），才回快取
    • 適合：需要最新內容的 API 資料、新聞頁面
  • Cache Only（只用快取）
    • 只用快取，不去網路
    • 適合：完全靜態、不會更新的資源
  • Network Only（只用網路）
    • 直接請求網路，不使用快取
    • 適合：登入驗證、付款這類需要即時性高的操作
  • Stale-While-Revalidate（先回舊的，再更新快取）
    • 先用快取的內容回應，背景再去抓新的，等下次用到的時候已經更新
    • 適合：文章列表、圖片資源

參考資料

https://ithelp.ithome.com.tw/articles/10276125

https://ithelp.ithome.com.tw/articles/10276666

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps