另一項工具可協助您在提供網頁應用程式時,兼顧即時與更新速度。
已出貨的商品為何?
stale-while-revalidate
可協助開發人員在即時性 (即刻載入快取內容) 和新鮮度 (確保日後使用快取內容的更新版本) 之間取得平衡。如果您維護的第三方網路服務或程式庫定期更新,或是您的第一方素材資源通常壽命較短,那麼 stale-while-revalidate
可能會是您現有快取政策的實用附加條款。
Chrome 75 和 Firefox 68 支援在 Cache-Control
回應標頭中設定 stale-while-revalidate
和 max-age
。
如果瀏覽器不支援 stale-while-revalidate
,則會在沒有通知的情況下忽略該設定值,並使用 max-age
,稍後將詳細說明...
說明
讓我們將 stale-while-revalidate
分成兩個部分:快取的回應可能過時,以及重新驗證的程序。
首先,瀏覽器如何判斷快取的回應是否「過時」?包含 stale-while-revalidate
的 Cache-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
標頭設定的行為最終會生效。
瞭解詳情
stale-while-revalidate
回應,這是 Fetch API 規格中的一部分。- RFC 5861,涵蓋初始
stale-while-revalidate
規格。 - HTTP 快取:第一道防線,取自本網站的「網路可靠性」指南。
主頁橫幅圖片由 Samuel Zeller 提供。