快取中

快取儲存空間是功能強大的工具。降低應用程式對網路狀況的影響。只要善用快取功能,您就能離線使用網頁應用程式,並在各種網路情況下盡可能快速提供素材資源。如資產和資料一文所述,你可以決定快取必要資產的最佳策略。如要管理服務工作站與 Cache Storage API 互動的快取。

瀏覽器支援

  • 43
  • 16
  • 41
  • 11.1

資料來源

Cache Storage API 可從不同的情況中取得:

  • 視窗結構定義 (PWA 的主執行緒)。
  • Service Worker。
  • 您使用的任何其他 worker。

使用服務工作處理程序管理快取的優點之一,就是其生命週期不會與視窗相關聯,也就是說您不會封鎖主執行緒。請注意,在大多數情況下,使用 Cache Storage API 都必須是在 TLS 連線下使用。

要快取的內容

關於快取,您想瞭解的第一個問題就是應快取。雖然該問題沒有單一答案,但您可以先從轉譯使用者介面所需的最低資源開始。

這些資源應包含:

  • 主要網頁 HTML (應用程式的 start_url)。
  • 主要使用者介面需要的 CSS 樣式表。
  • 使用者介面中使用的圖片。
  • 轉譯使用者介面所需的 JavaScript 檔案。
  • 算繪基本體驗所需的資料,例如 JSON 檔案。
  • 網頁字型。
  • 在多頁面應用程式中,您要提供可以快速或離線提供的其他 HTML 文件。

可離線使用

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

PWA 不應轉譯瀏覽器的錯誤訊息,指出網頁轉譯引擎無法載入網頁。請改用服務工作處理程序來顯示自訂訊息,避免發生一般且令人混淆的瀏覽器錯誤。

您可以根據 PWA 的需求,採用多種快取策略。因此,在設計快取用量時,提供快速可靠的體驗十分重要。舉例來說,如果所有應用程式素材資源都會快速下載、不會佔用太多空間,也不需要每次請求中更新,那麼快取所有素材資源都是有效的策略。另一方面,如果您的資源必須是最新版本,請考慮完全不快取這些素材資源。

使用 API

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

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() 方法收到 promise,並要求瀏覽器等待 promise 中的工作完成 (已處理或失敗) 後,才會終止 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 中公開實際大小,這會影響配額。某些瀏覽器顯示較大尺寸,例如 7Mb (無論檔案只有 1 KB)。

更新及刪除資產

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

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

對快取儲存空間進行偵錯

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

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

資源