本頁面由 Cloud Translation API 翻譯而成。

工作盒快取-快取

在執行階段快取素材資源時，並沒有一體適用的規則，可判斷特定 response 是否「有效」，且是否符合儲存及重複使用的資格。

workbox-cacheable-response 模組提供了一種標準方式是否要根據回應數值狀態碼，存在的標題特定值，或兩者的組合。

根據狀態碼快取

您可以設定 Workbox 策略一組具有快取資格的狀態碼，方法是加入設為策略的 plugins 參數的 CacheableResponsePlugin 例項：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

這項設定會告知 Workbox，在處理以下項目的回應時針對 https://third-party.example.com/images/ 的要求、快取所有要求狀態碼為 0 或 200。

注意：狀態碼 0 不透明回應。

根據標頭快取

您可以設定要檢查的 Workbox 策略用來將特定標頭值當做新增條件，只要在建構外掛程式時設定 headers 物件即可：

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

處理含有 /path/to/api/ 的網址要求回應時，請查看名為 X-Is-Cacheable 的標頭 (伺服器會將該標頭新增至回應)。如果有該標頭設為「true」的值，則回應就可以快取。

如果指定多個標頭，則只需要其中一個標頭與相關值相符。

根據標頭和狀態碼快取

您可以同時使用狀態和標頭設定。回應必須同時符合這兩個條件，才能視為可快取的回應；換句話說，回應必須包含其中一個已設定的狀態碼，且至少要有一個提供的標頭。

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

預設值為何？

如果您在未明確指定的情況下使用 Workbox 內建策略設定 cacheableResponse.CacheableResponsePlugin 時，下列預設條件為用於判定是否應收到來自網路的回應快取：

stroWithRevalidate 和 networkFirst：回應狀態為 0 (即不透明回應)。或 200 視為可快取
cacheFirst：系統會將狀態為 200 的回應視為可快取的回應。

根據預設，回應標頭不會用於判斷快取功能。

為什麼預設值不同？

預設值會根據狀態為 0 的回應 (即「不透明回應」) 是否會最終快取而有所不同。由於不透明回應具有「黑盒」特性，服務工作員無法得知回應是否有效，或是否反映跨來源伺服器傳回的錯誤回應。

對於內含某種更新快取回應的策略，例如 stroWithRevalidate 和 networkFirst 下次發生錯誤時，可有效緩解暫時性錯誤回應快取也已經更新，希望可以使用適當的成功回應。

如果策略涉及快取收到的第一個回應，並無限期重複使用該快取回應，快取和重複使用暫時性錯誤的後果會更嚴重。如何則根據預設，CacheFirst 會拒絕儲存回應 (除非它不允許) 狀態碼為 200。

進階用法

如果要在 Workbox 策略之外使用相同的快取邏輯，可以直接使用 CacheableResponse 類別。

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

類型

CacheableResponse

這個類別可讓您設定規則必須要有狀態碼和/或標頭， Response 才能視為可快取

屬性

建構函式

void

如要建構新的 CacheableResponse 例項，您必須至少提供一個 config 屬性。

如果同時指定 statuses 和 headers，則必須同時指定兩個條件才符合該條件，系統才會將 Response 視為可快取。

constructor 函式如下所示：
```
(config?: CacheableResponseOptions) => {...}
```
- config
  
  CacheableResponseOptions 選填
- returns
  CacheableResponse
isResponseCacheable

void

根據這個物件的設定，檢查回應是否可快取。

isResponseCacheable 函式如下所示：
```
(response: Response) => {...}
```
- 回應
  
  回應
  
  系統正在檢查快取功能的回應。
- returns
  布林值
  
  如果 Response 可快取，則為 true，false 反之。

CacheableResponseOptions

屬性

標題

物件 optional
狀態

number[] 選填

CacheableResponsePlugin

實作 cacheWillUpdate 生命週期回呼的類別。如此一來更輕鬆地對透過 Workbox 內建功能提出的要求加入可快取性檢查

屬性

建構函式

void

如要建構新的 CacheableResponsePlugin 例項，您必須提供至少一個 config 屬性。

如果同時指定 statuses 和 headers，則必須同時符合這兩個條件，Response 才會視為可快取。

constructor 函式如下所示：
```
(config: CacheableResponseOptions) => {...}
```
- config
  
  CacheableResponseOptions
- returns
  CacheableResponsePlugin