Service Worker 快取和 HTTP 快取

在 Service Worker 快取和 HTTP 快取層之間，使用一致或不同的到期邏輯的優缺點。

Jonathan Chen

雖然服務工作處理程序和 PWA 逐漸成為新型網頁應用程式的標準，但資源快取 變得比以往更加複雜本文章涵蓋了關於瀏覽器快取的全貌。 包括：

• Service Worker 快取和 HTTP 快取之間的用途和差異。
• 不同 Service Worker 快取過期策略的優缺點 HTTP 快取策略

快取流程總覽

大致來說，瀏覽器在要求資源時，會依照下列快取順序進行：

1. 服務工作者快取：服務工作者會檢查資源是否位於快取中，並根據程式設計的快取策略決定是否要傳回資源本身。注意事項 這樣系統就不會自動執行這項操作您需要在 Service Worker 並攔截網路要求，讓要求會從服務提供。 而非網路的工作站快取
2. HTTP 快取 (也稱為瀏覽器快取)：如果資源位於 HTTP 快取且尚未過期，瀏覽器會自動使用 從 HTTP 快取中移除資源
3. 伺服器端：如果 Service Worker 快取或 HTTP 快取中沒有任何內容， 瀏覽器會前往網路要求資源如果資源未在 CDN 中快取， 要求必須一路回到原始伺服器

快取層

Service Worker 快取

Service Worker 會攔截網路類型 HTTP 要求，並使用 快取策略 判斷應傳回哪些資源給瀏覽器。服務工作者快取和 HTTP 快取的一般用途相同，但服務工作者快取提供更多快取功能，例如精細控制快取的內容和快取方式。

控管服務工作者快取

服務工作者會使用事件監聽器 (通常是 fetch 事件) 攔截 HTTP 要求。這個 程式碼片段示範 優先快取 快取策略

極力建議您使用 Workbox 為改造替人帶來嶄新的體驗舉例來說： 使用單行規則運算式程式碼來註冊資源網址路徑。

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

Service Worker 快取策略和用途

下表概述了常見的 Service Worker 快取策略，以及每項策略的實用時機。

Service Worker 快取的其他優點

除了可精細控制快取邏輯，服務工作者快取功能還提供以下功能：

• 更多來源的記憶體和儲存空間：瀏覽器會分配 HTTP 快取 將資源分配給各個來源。在其他 如果您有多個子網域，這些子網域都會共用相同的 HTTP 快取。由於沒有 確保來源/網域的內容長期保留在 HTTP 快取中。舉例來說，使用者可以透過瀏覽器設定 UI 手動清除快取，或是在網頁上觸發強制重新載入。透過 Service Worker 快取，可大幅提高 快取內容保留快取的可能性請參閱 Persistent Storage。
• 在不穩定的網路或離線體驗環境下提高靈活度：只要使用 HTTP 快取 只有一個二進位檔選項：無論是否快取資源。透過服務工作者快取，您可以更輕鬆地減輕小型「中斷」情形 (採用「stale-while-revalidate」策略)，提供完整的離線體驗 (採用「Cache only」策略)，甚至是介於兩者之間的做法，例如自訂 UI，其中部分網頁內容來自服務工作者快取，並在適當情況下排除部分內容 (採用「Set catch handler」策略)。

HTTP 快取

當瀏覽器首次載入網頁及相關資源時，系統會將這些資源儲存在 HTTP 快取。除非使用者明確停用，否則瀏覽器通常會自動啟用 HTTP 快取。

使用 HTTP 快取代表必須依賴伺服器來判斷何時要快取資源，以及 。

使用 HTTP 回應標頭控制 HTTP 快取到期

當伺服器回應瀏覽器對資源的要求時，伺服器會使用 HTTP 回應標頭，告知瀏覽器應快取資源多久。詳情請參閱「回應標頭：設定網路伺服器」。

HTTP 快取策略和應用實例

HTTP 快取比 Service Worker 快取簡單許多，因為 HTTP 快取只會處理 以時間為準 (TTL) 資源到期時間邏輯。如要進一步瞭解 HTTP 快取策略，請參閱「應使用哪些回應標頭值？」和「摘要」。

設計快取到期邏輯

本節說明在 Service Worker 中使用一致到期邏輯的優缺點 快取和 HTTP 快取層，以及在這些環境中個別過期邏輯的優缺點 包含四個不同的層

下方的 Glitch 示範如何在不同情況下，使用服務工作者快取和 HTTP 快取功能：

所有快取層的一致到期邏輯

為了說明優缺點，我們將探討 3 個情境：長期、中期、 無法達到短期的目標

情境：長期快取 (快取，改回使用網路)

• 快取資源有效時 (<= 30 天)：Service Worker 會傳回快取 不需前往該網路
• 快取資源到期 (超過 30 天)：服務工作站會前往網路擷取資源。瀏覽器的 HTTP 快取中沒有資源副本，因此 位於伺服器端

缺點：在這種情況下，HTTP 快取所提供的值較小，因為瀏覽器在 在 Service Worker 中，快取到期時，將要求傳遞至伺服器端。

情境：中期快取 (過時至重新驗證)

• 快取資源有效時 (< 1 天)：服務工作者會立即傳回快取的資源，並前往網路擷取資源。瀏覽器有一個 寫入服務工作站，使其傳回至服務工作站。
• 快取資源過期時 (超過 1 天)：Service Worker 會傳回快取 並前往網路擷取資源。瀏覽器沒有 HTTP 快取中資源的副本，因此在伺服器端擷取資源。

缺點：Service Worker 需要額外的快取破壞機制，才能覆寫 HTTP 快取，充分利用「重新驗證」步驟。

情境：短期快取 (網路改用快取)

• 快取資源有效時 (<= 10 分鐘)：Service Worker 會前往網路 擷取資源。瀏覽器的 HTTP 快取中已有該資源的副本，因此會傳回 才傳送到 Service Worker，而不必前往伺服器端
• 快取資源到期 (超過 10 分鐘)：服務工作站會立即傳回快取的資源，並前往網路擷取資源。瀏覽器在 HTTP 快取中沒有資源的副本，因此會前往伺服器端擷取資源。

缺點：與中期快取的情況類似，Service Worker 需要額外的 快取清除邏輯，用於覆寫 HTTP 快取，以便從 伺服器端代碼

服務工作者可用於所有情況

在所有情況下，Service Worker 快取仍然可以傳回快取的資源，但前提是網路 。另一方面，當網路不穩定或中斷時，HTTP 快取就無法正常運作。

Service Worker 快取和 HTTP 層的不同快取到期邏輯

為了說明優缺點，我們將再次探討長期、中期和短期的情況。

情境：長期快取 (快取，改回使用網路)

• 當快取資源在 Service Worker 快取中有效時 (<= 90 天)：服務 工作站會立即傳回快取的資源。
• Service Worker 快取中的快取資源已過期 (超過 90 天)：服務 工作站會透過網路擷取資源。瀏覽器的 HTTP 快取中沒有資源的副本，因此會轉送至伺服器端。

優缺點：

• 專家級：服務工作處理程序傳回快取資源時，使用者可獲得即時回應 立即生效
• Pro：Service Worker 可更精細地控管何時使用快取 以要求新版資源。
• 缺點：需要定義明確的 Service Worker 快取策略。

情境：中期快取 (Stale-while-revalidate)

• 當快取資源在 Service Worker 快取中有效時 (<= 30 天)：服務 工作站會立即傳回快取的資源。
• Service Worker 快取中 (超過 30 天) 中的快取資源過期時：服務 工作站會進入該資源的網路。瀏覽器沒有 採 HTTP 快取 因此是在伺服器端進行

優缺點：

• 優點：服務工作者會立即傳回快取的資源，因此使用者可立即獲得回應。
• 優點：服務工作者可確保指定網址的下一個要求使用來自網路的新回應，這要歸功於「在背景」執行的重新驗證作業。
• 缺點：需要定義明確的 Service Worker 快取策略。

情境：短期快取 (網路改用快取)

• 快取的資源在服務工作站快取中有效 (<= 1 天)：服務工作站會前往網路取得資源。瀏覽器會從 HTTP 以及快取如果網路發生問題，服務工作站會從服務工作站快取傳回資源
• Service Worker 快取中的快取資源已過期 (超過 1 天)：服務 工作站會透過網路擷取資源。由於 HTTP 快取中的快取版本已過期，瀏覽器會透過網路擷取資源。

優缺點：

• Pro：當網路不穩定或故障時，Service Worker 會傳回快取 管理資源
• 缺點：Service Worker 需要額外的快取清除功能來覆寫 HTTP 快取及 設為「優先網路」要求。

結論

由於快取情境結合相當複雜，因此無法設計一項規則。 適用所有情況不過，根據前一節的發現，有幾個 設計快取策略時需要參考下列建議：

• 服務工作者快取邏輯不必與 HTTP 快取到期邏輯一致。盡可能在服務工作站中使用較長的到期邏輯，以便讓服務工作站擁有更多控制權。
• HTTP 快取仍扮演重要角色，但如果網路 。
• 請重新檢視各項資源的快取策略，確保服務工作單元快取策略可提供其價值，且不會與 HTTP 快取衝突。

瞭解詳情

• 網路可靠性
• 透過 HTTP 快取防止不必要的網路要求
• HTTP 快取程式碼研究室
• 評估服務工作人員的實際效能影響
• Cache-Control 與 到期
• 揭開快取的神秘面紗：檢查、清除及停用快取