定期重新驗證,確保內容新鮮有趣

這項額外工具可協助您在提供網頁應用程式時,平衡即時性和新鮮度。

stale-while-revalidate 可協助開發人員在即時性 (即刻載入快取內容) 和新鮮度 (確保日後使用快取內容的更新版本) 之間取得平衡。如果您維護的第三方網路服務或程式庫定期更新,或是第一方素材資源的生命週期較短,那麼 stale-while-revalidate 可能會是您現有快取政策的實用附加項目。

Chrome 75Firefox 68 支援在 Cache-Control 回應標頭中設定 stale-while-revalidatemax-age

不支援 stale-while-revalidate 的瀏覽器會默默忽略該設定值,並使用 max-age,我稍後會說明這一點…

讓我們將 stale-while-revalidate 分成兩個部分:快取的回應可能過時,以及重新驗證的程序。

首先,瀏覽器如何判斷快取的回應是否「過時」?包含 stale-while-revalidateCache-Control 回應標頭也應包含 max-age,而透過 max-age 指定的秒數則是決定過時性的依據。任何比 max-age 更新的快取回應都會視為新鮮,而較舊的快取回應則為過時。

如果本機快取的回應仍為最新狀態,則可直接使用該回應來滿足瀏覽器的要求。從 stale-while-revalidate 的角度來看,在這種情況下,您不需要採取任何行動。

但如果快取的回應過時,系統會執行另一項以年齡為依據的檢查:快取回應的年齡是否在 stale-while-revalidate 設定提供的額外時間範圍內?

如果過時回應的時間落在這個時間範圍內,系統就會使用該回應來滿足瀏覽器的要求。同時,系統會以不會延遲快取回應使用情形的方式,向網路提出「重新驗證」要求。傳回的回應可能會包含與先前快取回應相同的資訊,也可能不同。無論如何,網路回應都會儲存在本機,取代先前快取的內容,並重設日後任何 max-age 比較作業所使用的「新鮮度」計時器。

不過,如果快取的回應過舊,超過 stale-while-revalidate 的時間範圍,就無法滿足瀏覽器的要求。瀏覽器會改為從網路擷取回應,並用於滿足初始要求,同時為本機快取填入最新回應。

實際範例

以下是 HTTP API 的簡單範例,用於傳回目前時間,具體來說,是目前小時過後的數分鐘。

在這種情況下,網路伺服器會在 HTTP 回應中使用這個 Cache-Control 標頭:

Cache-Control: max-age=1, stale-while-revalidate=59

這項設定表示,如果在接下來 1 秒內重複要求時間,先前快取的值仍會保持新鮮,並且會照原樣使用,而不會進行任何重新驗證。

如果在 1 到 60 秒後重複要求,快取的值就會過時,但會用於滿足 API 要求。同時,系統會在「背景」中提出重新驗證要求,以便在快取中填入新值,供日後使用。

如果要求在 60 秒後重複,則系統完全不會使用過時的回應,且瀏覽器的要求和快取重新驗證都必須依賴從網路取得的回應。

以下是這三種不同狀態的細節,以及在本範例中各自適用的時間範圍:

說明上一個部分資訊的圖表。

常見用途為何?

雖然上述「小時後分鐘」API 服務的範例是人為設計的,但它說明瞭預期用途:提供需要重新整理的資訊,但可接受一定程度的過時資訊的服務。

較不做作的例子包括目前天氣狀況的 API,或是過去一小時內最熱門的新聞標題。

一般來說,任何以已知間隔更新的回應都可能會多次要求,且在該間隔內為靜態,因此非常適合透過 max-age 進行短期快取。除了 max-age 之外,使用 stale-while-revalidate 可提高未來要求從快取中滿足的可能性,並提供較新鮮的內容,且不會阻擋網路回應。

如何與服務工作者互動?

如果您聽過 stale-while-revalidate,很可能是在服務工作者中使用的食譜情境中。

透過 Cache-Control 標頭使用 stale-while-revalidate 與在服務工作站中使用時有些相似之處,且在考量新鮮度取捨和最大壽命時,也需要考量許多相同的因素。不過,在決定是否要實作以服務工作者為基礎的方法,或是只依賴 Cache-Control 標頭設定時,您必須考量幾項事項。

請在下列情況下使用 Service Worker 方法:

  • 您已在網頁應用程式中使用 Service Worker。
  • 您需要精細控管快取內容,並希望實作類似最近最少使用的到期日政策的機制。Workbox 的 快取到期模組可協助您完成這項作業。
  • 您希望在重新驗證步驟期間,系統會在背景通知您陳舊的回應是否有所變更。Workbox 的 Broadcast Cache Update 模組可協助完成這項作業。
  • 您需要在所有新式瀏覽器中實作此 stale-while-revalidate 行為。

請在下列情況下使用 Cache-Control 方法:

  • 您不想處理部署及維護網頁應用程式 Service Worker 的額外負擔。
  • 您可以讓瀏覽器自動管理快取,避免本機快取檔案過大。
  • 您可以使用目前並未在所有新式瀏覽器中支援的方法 (截至 2019 年 7 月;日後支援的瀏覽器可能會增加)。

如果您使用服務工作者,並且透過 Cache-Control 標頭為部分回應啟用 stale-while-revalidate,則服務工作者通常會在回應要求時「先行處理」。如果服務工作者決定不回應,或是在產生回應的過程中使用 fetch() 提出網路要求,則透過 Cache-Control 標頭設定的行為最終會生效。

瞭解詳情

主頁橫幅圖片由 Samuel Zeller 提供。