快取中

快取儲存空間是一項功能強大的工具。可降低應用程式對網路條件的影響。妥善運用快取,您就能將網頁應用程式設為可離線使用,無論在何種網路條件下都能盡快提供資產。如「資產與資料」一文所述,您可以為快取必要資產決定最佳策略,如要管理 Service Worker 與 Cache Storage API 互動的快取,

瀏覽器支援

  • Chrome:43.
  • Edge:16.
  • Firefox:41。
  • Safari:11.1.

資料來源

不同的結構定義可以使用 Cache Storage API:

  • 視窗內容 (PWA 的主執行緒)。
  • Service Worker。
  • 您使用的任何其他工作站,

使用 Service Worker 管理快取的其中一項優點是,其生命週期不會與視窗相關聯,這代表您並未封鎖主執行緒。請注意,大多數這類環境都必須在傳輸層安全標準 (TLS) 連線下才能使用 Cache Storage API。

要快取的內容

您可能會想使用快取功能。這個問題沒有單題的答案,但您可以先從轉譯使用者介面所需的全部資源開始,盡可能減少需求。

這些資源應包含:

  • 主要頁面的 HTML (應用程式的 start_url)。
  • 主要使用者介面需使用的 CSS 樣式表。
  • 使用者介面中使用的圖片。
  • 呈現使用者介面所需的 JavaScript 檔案。
  • 轉譯基本體驗所需的資料 (例如 JSON 檔案)。
  • 網頁字型。
  • 在多頁面應用程式中,其他要加快或離線提供服務的 HTML 文件。
,瞭解如何調查及移除這項存取權。

可離線使用

雖然漸進式網頁應用程式需要支援離線功能,但請務必瞭解並非所有 PWA 都需要完整的離線體驗,例如雲端遊戲解決方案或加密資產應用程式。因此,您可以提供基本使用者介面來引導使用者遇到上述情況。

您的 PWA 不應轉譯瀏覽器的錯誤訊息,指出網頁轉譯引擎無法載入網頁。請改用 Service Worker 顯示自己的訊息,避免發生一般且令人混淆的瀏覽器錯誤。

您可以根據 PWA 的需求,使用許多不同的快取策略。因此,在設計快取使用方式時,才能提供快速又可靠的體驗。舉例來說,如果您所有應用程式素材資源都可以快速下載、不佔用大量空間,您也不必在每次要求中更新,快取所有素材資源就是有效的策略。另一方面,如果資源需是最新版本,建議您完全不要快取這些素材資源。

使用 API

使用 Cache Storage API 在來源中定義一組快取,每個快取都會以您可定義的字串名稱識別。透過 caches 物件存取 API,open 方法可讓您建立或開啟已建立的快取。開放方法會傳回快取物件的承諾。

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

下載及儲存資產

如要要求瀏覽器下載並儲存素材資源,請使用 addaddAll 方法。add 方法會發出要求並儲存一個 HTTP 回應,以及 addAll 一組 HTTP 回應做為交易,依據要求或網址陣列。

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});
敬上

快取儲存空間介面會儲存回應的完整內容,包括所有標頭和內文。因此,您之後可以使用 HTTP 要求或網址做為金鑰來擷取此物件。具體做法請參閱「放送」章節

快取時機

在 PWA 中,您可以全權決定何時快取檔案。雖然其中一種方法是在安裝 Service Worker 時盡可能儲存最多資產,但這通常不是最理想的做法。快取不必要的資源不僅浪費頻寬和儲存空間,也可能導致應用程式提供非預期的資源。

您可以在 PWA 的生命週期內多次快取素材資源,不需要一次快取所有資產,例如:

  • 安裝 Service Worker 時。
  • 首次載入網頁後。
  • 使用者導覽至某個段落或路線時。
  • 網路閒置時。

您可以在主執行緒或 Service Worker 環境中要求快取新檔案。

快取 Service Worker 中的資產

最常見的情況之一,是在安裝 Service Worker 時,快取至少一組資產。方法是在 Service Worker 的 install 事件中使用快取儲存空間介面。

由於 Service Worker 執行緒可隨時停止,因此您可以要求瀏覽器等待 addAll 承諾完成,增加儲存所有資產的機會,讓應用程式維持應用程式一致性。以下範例說明如何透過 Service Worker 事件監聽器所接收事件引數的 waitUntil 方法,執行相關操作。

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

waitUntil() 方法會收到承諾,並要求瀏覽器先等待承諾中的工作解決 (完成或失敗),然後才終止 Service Worker 程序。您可能需要鏈結「承諾」並傳回 add()addAll() 呼叫,將單一結果取得 waitUntil() 方法。

您也可以使用 async/await 語法處理承諾。在這種情況下,您需要建立可以呼叫 await 的非同步函式,並在呼叫後將承諾傳回 waitUntil(),如以下範例所示:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

跨網域要求和不透明回應

PWA 可下載及快取來源和跨網域的資產 (例如第三方 CDN 的內容)。在跨網域應用程式中,快取互動與來源相同要求非常相似。系統會執行要求,並將回應副本儲存在您的快取中。和其他快取資產一樣,只能在應用程式來源中使用。

資源會以不透明回應的形式儲存,也就是說,您的程式碼無法查看或修改該回應的內容或標頭。此外,不透明回應不會在 Storage API 中公開實際大小,影響配額。有些瀏覽器會顯示大型尺寸,例如,不論檔案是 1 Kb,都可以使用 7 MB。

更新及刪除資產

您可以使用「cache.put(request, response)」更新資產,並使用「delete(request)」刪除資產。

詳情請參閱快取物件說明文件

偵錯快取儲存空間

許多瀏覽器都提供在開發人員工具的「應用程式」分頁中,對快取儲存空間內容偵錯的方法。在這個頁面中,您可以查看目前來源中每個快取的內容。如要進一步瞭解這些工具,請參閱工具和偵錯章節

Chrome 開發人員工具偵錯快取儲存空間內容。

資源