Service Worker 快取和 HTTP 快取

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

Jonathan Chen

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

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

快取流程總覽

大致來說，瀏覽器在要求資源時會採用以下快取順序：

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

快取層

Service Worker 快取

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

控管 Service Worker 快取

Service Worker 會使用事件攔截 HTTP 要求 接聽程式 (通常是 fetch 事件)。這個 程式碼片段示範 優先快取 快取策略

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

import {registerRoute} from 'workbox-routing';

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

Service Worker 快取策略和用途

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

Service Worker 快取的其他優點

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

• 來源的記憶體和儲存空間更多：瀏覽器會分配 HTTP 快取 將資源分配給各個來源。在其他 如果您有多個子網域，這些子網域都會共用相同的 HTTP 快取。由於沒有 確保來源/網域的內容長期保留在 HTTP 快取中。適用對象 例如透過瀏覽器的設定使用者介面手動清除快取，或 導致某個網頁觸發了強制重新載入透過 Service Worker 快取，可大幅提高 快取內容保留快取的可能性請參閱 Persistent Storage。
• 在不穩定的網路或離線體驗環境下提高靈活度：只要使用 HTTP 快取 只有一個二進位檔選項：無論是否快取資源。具備 Service Worker 快取功能 即可緩解透過「過時的舊驗證」策略 提供完整的離線體驗 (採用「僅快取」策略) 或 例如自訂 UI，其中部分網頁來自 Service Worker 快取， 視情況排除某些部分 (使用「設定擷取處理常式」策略)。

HTTP 快取

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

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

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

伺服器回應瀏覽器對資源的要求時，會使用 HTTP 回應標頭來 會告訴瀏覽器快取資源的時間長度。請參閱回應標頭：設定網路 伺服器瞭解詳情。

HTTP 快取策略和應用實例

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

設計快取到期邏輯

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

下方的 Glitch 示範了 Service Worker 快取和 HTTP 快取功能的運作原理 不同情境

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

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

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

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

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

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

• 快取資源有效時 (<= 1 天)：Service Worker 會傳回快取 並前往網路擷取資源。瀏覽器有一個 重新寫入服務工作處理程序，把該資源傳回給服務工作站。
• 快取資源過期時 (超過 1 天)：Service Worker 會傳回快取 並前往網路擷取資源。瀏覽器沒有 HTTP 快取中資源的副本，因此在伺服器端擷取資源。

缺點：Service Worker 需要額外的快取清除功能，才能覆寫 充分運用「重新驗證」工具採用

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

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

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

適用所有情境的 Service Worker

在所有情況下，Service Worker 快取仍然可以傳回快取的資源，但前提是網路 不穩定。另一方面，當網路不穩定或故障時，HTTP 快取並不可靠。

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

為示範優缺點，我們將分別探討長期、中期和短期策略 情境

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

• 當快取資源在 Service Worker 快取中有效時 (<= 90 天)：服務 工作站會立即傳回快取的資源。
• Service Worker 快取中的快取資源已過期 (超過 90 天)：服務 工作站會透過網路擷取資源。瀏覽器沒有 存取資源，以在伺服器端進行

優缺點：

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

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

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

優缺點：

• 專家級：服務工作處理程序傳回快取資源時，使用者可獲得即時回應 立即生效
• Pro：Service Worker 可確保特定網址的 next 要求使用 重新驗證作業會在「背景」中發生，因此來自網路的新回應。
• 缺點：需要定義明確的 Service Worker 快取策略。

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

• 當快取資源在 Service Worker 快取中有效時 (<= 1 天)：服務 工作站會進入該資源的網路。瀏覽器會從 HTTP 以及快取如果網路故障，Service Worker 會傳回來自 Service Worker 快取
• Service Worker 快取中的快取資源已過期 (超過 1 天)：服務 工作站會透過網路擷取資源。瀏覽器會從 因為 HTTP 快取中的快取版本過期

優缺點：

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

結論

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

• Service Worker 快取邏輯不必與 HTTP 快取到期一致 邏輯。如果可以，請在 Service Worker 中使用較長的到期時間邏輯來授予 Service Worker 更嚴密地掌控
• HTTP 快取仍扮演重要角色，但如果網路 。
• 重新檢查各項資源的快取策略，確保服務工作站快取 策略提供值，而不會與 HTTP 快取發生衝突。

瞭解詳情

• 網路可靠性
• 使用 HTTP 快取防止不必要的網路要求
• HTTP 快取程式碼研究室
• 評估服務工作人員的實際效能影響
• Cache-Control 與 到期