本文闡述在 Service Worker 快取和 HTTP 快取層中使用一致或不同的過期邏輯的[優缺點](https://web.dev/service-worker-caching-and-http-caching/)。

雖然 Service Worker 和 PWA 正在成為現代 Web 應用程式的標準，但資源快取已變得比以往任何時候都更加複雜。 對於前端開發者來說，有必要了解 Service Worker 快取和 HTTP 快取的用例和區別，以及與常規 HTTP 快取策略相比，不同 Service Worker 快取過期策略的優缺點。

概括地說，瀏覽器在請求資源時遵循以下快取順序：

(1) Service Worker 快取：Service Worker 檢查資源是否在其快取中，並根據其程式設計的快取策略決定是否返回資源本身。 請注意，這不會自動發生。 您需要在服務工作者中建立一個 fetch 事件處理程式並攔截網路請求，以便從服務工作者的快取而不是網路提供請求。

![](https://img-blog.csdnimg.cn/img_convert/bff95a73b68909026e98503d8c2dc3e0.png)

(2) HTTP快取（也稱為瀏覽器快取）：如果資源在HTTP快取中找到並且還沒有過期，瀏覽器會自動使用HTTP快取中的資源。

(3) 伺服器端：如果在 service worker 快取或 HTTP 快取中沒有找到，瀏覽器會去網路請求資源。 如果資源沒有快取在 CDN 中，則請求必須一直返回到源伺服器。

# Service worker caching

Service Worker 攔截網路型別的 HTTP 請求，並使用快取策略來確定應將哪些資源返回給瀏覽器。 Service Worker 快取和 HTTP 快取具有相同的通用目的，但 Service Worker 快取提供了更多快取功能，例如對快取內容和快取方式的細粒度控制。

Service Worker 使用事件偵聽器（通常是 fetch 事件）攔截 HTTP 請求。 下列程式碼片段演示了 Cache-First 快取策略的邏輯。

![](https://img-blog.csdnimg.cn/img_convert/e639e86a7aabe79020fb0d08db616849.png)

對於 SAP 電商雲 Spartacus UI 來說，一旦以 PWA 模式安裝了 Spartacus，就會安裝一個 service worker，它會提供 index.html 的快取版本以及 js 檔案。 這會導致完全跳過 Spartacus 的伺服器端渲染過程。

Service Worker Cache 和 HTTP Cache 的區別

相關文章