Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

Service Worker 和 Cache Storage API

Jeff Posnick

你正努力提升網路可靠性。瀏覽器的 HTTP 快取是第一道防線，但如您所知，只有在載入先前造訪過、有版本編號的網址時，這項功能才真正有效。單靠 HTTP 快取是不夠的。

幸好，有兩項新工具可以幫助您扭轉局勢：Service Worker 和 Cache Storage API。由於兩者經常搭配使用，因此建議同時瞭解這兩項功能。

Service Worker

Service Worker 內建於瀏覽器中，並由您負責建立的一小段額外 JavaScript 程式碼控制。您會將這個檔案與構成實際網頁應用程式的其他檔案一起部署。

Service Worker 具有一些特殊功能。除了其他職責外，它會耐心等待網頁應用程式發出傳出要求，然後透過攔截要求來採取行動。Service Worker 如何處理這項攔截的要求，取決於您。

對於某些要求，最佳做法可能是允許要求繼續傳送至網路，就像完全沒有 Service Worker 一樣。

不過，對於其他要求，您可以利用比瀏覽器 HTTP 快取更靈活的功能，並傳回可靠快速的回應，而不必擔心網路問題。這需要使用另一個拼圖：Cache Storage API。

Cache Storage API

Browser Support

Source

Cache Storage API 可讓開發人員完全控管快取內容，開創全新可能性。Cache Storage API 不依賴 HTTP 標頭和瀏覽器內建啟發式的組合，而是提供程式碼導向的快取方法。從 Service Worker 的 JavaScript 呼叫 Cache Storage API 時，這項 API 特別實用。

等等… 現在還要考慮另一個快取嗎？

您可能會問自己：「我是否仍需要設定 HTTP 標頭？」和「我可以使用這個新的快取，但 HTTP 快取無法執行哪些操作？」別擔心，這些都是自然反應。

即使您知道自己使用的是 Cache Storage API，仍建議您在網路伺服器上設定 Cache-Control 標頭。通常，您可以為未建立版本的網址設定 Cache-Control: no-cache，和/或為包含版本資訊 (例如雜湊) 的網址設定 Cache-Control: max-age=31536000。

填入 Cache Storage API 快取時，瀏覽器預設會檢查 HTTP 快取中是否有現有項目，如果找到，就會使用這些項目。如果您將版本化網址新增至 Cache Storage API 快取，瀏覽器就會避免額外的網路要求。反之，如果您使用設定錯誤的 Cache-Control 標頭，例如為未版本化的網址指定長效快取生命週期，則可能會將過時內容新增至 Cache Storage API，進而使情況惡化。必須先整理 HTTP 快取行為，才能有效使用 Cache Storage API。

至於這項新 API 現在能做什麼，答案是：很多。以下列舉一些常見用途，如果只使用 HTTP 快取，可能難以或無法達成：

對快取內容採用「在背景重新整理」的做法，也就是 stale-while-revalidate。
設定快取素材資源數量上限，並實作自訂到期政策，在達到上限時移除項目。
比較先前快取和最新的網路回應，查看是否有任何變更，並在資料實際更新時，讓使用者更新內容 (例如透過按鈕)。

詳情請參閱「Cache API：快速指南」。

API 基本概念

關於 API 的設計，請注意以下幾點：

讀取及寫入這些快取時，系統會使用 Request 物件做為專屬金鑰。為方便起見，您可以傳入網址字串 (例如 'https://example.com/index.html') 做為金鑰，而非實際的 Request 物件，API 會自動為您處理。
Response 物件會做為這些快取中的值。
快取資料時，系統會忽略特定 Response 上的 Cache-Control 標頭。系統不會自動內建到期或新鮮度檢查，一旦將項目儲存在快取中，該項目就會持續存在，直到程式碼明確移除為止。(有些程式庫可簡化快取維護作業。本系列課程稍後會介紹這些內容。
與 LocalStorage 等舊版同步 API 不同，所有 Cache Storage API 作業都是非同步。

快速瞭解：Promise 和 async/await

Service Worker 和 Cache Storage API 使用非同步程式設計概念。尤其是，他們高度依賴 Promise 來代表非同步作業的未來結果。在深入探討之前，請先熟悉 Promise 和相關的 async/await 語法。

先不要部署該程式碼

雖然兩者提供了重要的基礎，且可直接使用，但 Service Worker 和 Cache Storage API 實際上都是較低階的建構區塊，有許多邊緣案例和「陷阱」。有些高階工具可以協助您解決這些 API 的難題，並提供建構可部署於正式環境的 Service Worker 所需的一切。下一篇指南將介紹其中一項工具：Workbox。