Cache API: クイックガイド

Cache API を使用して、アプリケーション データをオフラインで使用可能にする方法について説明します。

Pete LePage

Cache API は、ネットワークを保存、取得するためのシステム 対応するレスポンスを確認できます。これは通常のリクエストか レスポンスは、コンテキストに基づいて生成されます。 後で使用するためにデータを保存することのみを目的として作成されています。

Service Worker がネットワーク リクエストをキャッシュに保存できるようにする Cache API の作成 ネットワーク速度やネットワーク速度に関係なく 可用性。ただし、API は一般的なストレージ メカニズムとして使用することもできます。

どこで利用できますか？

Cache API はすべての最新ブラウザで使用できます。内容 グローバル caches プロパティで公開されているため、 単純な特徴検出で API を改良できます。

const cacheAvailable = 'caches' in self;

Cache API には、ウィンドウ、iframe、ワーカー、Service Worker からアクセスできます。

保存できるデータ

キャッシュには、Request と HTTP リクエストとレスポンスを表す Response オブジェクト できます。ただし、リクエストとレスポンスにはあらゆる種類のデータを含めることができます。 HTTP 経由で転送できるデータウェアハウスです

保存できるデータ量はどれくらいですか？

簡単に言うと、大量、少なくとも数百 MB、場合によっては数倍です データを格納できますブラウザの実装はさまざまですが、 利用可能なストレージの容量は、通常、基盤となる クリックします。

キャッシュの作成とオープン

キャッシュを開くには、caches.open(name) メソッドを使用して、ファイルの名前 使用しています。キャッシュが存在しない場合は、名前が 作成されます。このメソッドは、Cache オブジェクトで解決される Promise を返します。

const cache = await caches.open('my-cache');
// do something with cache...

キャッシュへの追加

キャッシュにアイテムを追加するには、add、addAll、put の 3 つの方法があります。 3 つのメソッドはすべて Promise を返します。

cache.add

最初は cache.add() です。このメソッドは 1 つのパラメータ（Request （string）。ネットワークに対してリクエストを行い、そのレスポンスを キャッシュに格納されますもし 失敗した場合、またはレスポンスのステータス コードが 200 の範囲外である場合、 何も保存されず、Promise が拒否します。クロスオリジンは CORS モードでないリクエストは、次の status を返すため、保存できません。 0。このようなリクエストは put でのみ保存できます。

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

次は cache.addAll() です。これは add() と似ていますが、 Request オブジェクトまたは URL（string）の配列。これは リクエストごとに cache.add を呼び出す。ただし、Promise は キャッシュに保存されていない場合、リクエストが拒否されます。

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

いずれの場合も、一致する既存のエントリは新しいエントリによって上書きされます。 これと同じマッチング ルールを使用します。これについては、 取得します。

cache.put

最後は cache.put() です。これを使用すると、任意のレスポンスを 独自の Response を作成して保存できます。2 回で完了 あります。1 つ目は、Request オブジェクトか URL（string）のいずれかです。 2 つ目の URL は、Response ネットワークによって生成されたものか、 できます。

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

put() メソッドは add() や addAll() よりも制限が緩く、かつ CORS 以外のレスポンス、またはステータスが 200 の範囲外です。以前のルールが上書きされ レスポンスが返されます。

Request オブジェクトの作成

格納する情報の URL を使用して、Request オブジェクトを作成します。

const request = new Request('/my-data-store/item-id');

Response オブジェクトの操作

Response オブジェクト コンストラクタは、 Blob、ArrayBuffer、FormData オブジェクト、文字列。

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

Response の MIME タイプを設定するには、適切なヘッダーを設定します。

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

Response を取得し、その本文にアクセスしたい場合は、 複数のヘルパー メソッドを使用できます。それぞれが Promise を返します。 別の型の値を返します。

次に例を示します。

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

キャッシュからの取得

キャッシュ内のアイテムを検索するには、match メソッドを使用します。

const response = await cache.match(request);
console.log(request, response);

request が文字列の場合、ブラウザは次の呼び出しによって文字列を Request に変換します。 new Request(request)。この関数は Promise を返します。これは、 一致するエントリが見つかった場合は Response、そうでない場合は undefined。

2 つの Requests が一致するかどうかを判断するために、ブラウザは URL 以外の情報も使用します。2 本 クエリ文字列が異なっている場合、リクエストが異なっているとみなされます。 Vary ヘッダー、HTTP メソッド（GET、POST、PUT など）。

これらの一部またはすべてを無視するには、オプション オブジェクトを 指定します。

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

キャッシュに保存されているリクエストが複数一致する場合、最初に作成されたリクエスト 返されます。一致するすべてのレスポンスを取得する場合は、 cache.matchAll()。

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

ショートカットとして、caches.match() を使用してすべてのキャッシュを一度に検索できます。 キャッシュごとに cache.match() を呼び出す代わりに、

検索機能

Cache API には、リクエストやレスポンスを検索する手段は用意されていない Response オブジェクトと照合するエントリを除きます。ただし、 フィルタを使用するかインデックスを作成して、独自の検索を実装します。

フィルタリング

独自の検索を実装する方法の一つは、すべてのエントリを反復処理し、 必要なものだけに絞り込みます。たとえば URL が .png で終わるアイテム。

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

これにより、Request オブジェクトと Response オブジェクトの任意のプロパティを使用して、 エントリをフィルタしますただし、大規模なデータセットを検索する場合は、処理に時間がかかります。 分析できます

インデックスの作成

独自の検索を実装するもう 1 つの方法は、個別のリソースのインデックスを 検索して IndexedDB にインデックスを保存できるエントリの数。このようなタイプの予測は、 パフォーマンスが格段に向上し、 多数のエントリがあります。

Request の URL を検索可能なプロパティとともに保存している場合 検索を実行した後で、正しいキャッシュ エントリを簡単に取得できます。

アイテムの削除

キャッシュからアイテムを削除するには:

cache.delete(request);

request には Request または URL 文字列を指定できます。このメソッドは、 cache.match と同じオプション オブジェクトです。これにより、複数のファイルを削除できます。 同じ URL に対する Request/Response ペア。

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

キャッシュの削除

キャッシュを削除するには、caches.delete(name) を呼び出します。この関数は Promise。キャッシュが存在し、削除された場合は true に解決されます。 それ以外の場合は false。

ありがとう

この記事のオリジナル版を執筆してくれた Mat Scales の WebFundamentals に初めて掲載されました