Cache API を使用して、アプリケーション データをオフラインで使用可能にする方法について説明します。
Cache API は、ネットワークを保存、取得するためのシステム 対応するレスポンスを確認できます。これは通常のリクエストか レスポンスは、コンテキストに基づいて生成されます。 後で使用するためにデータを保存することのみを目的として作成されています。
Service Worker がネットワーク リクエストをキャッシュに保存できるようにする Cache API の作成 ネットワーク速度やネットワーク速度に関係なく 可用性。ただし、API は一般的なストレージ メカニズムとして使用することもできます。
どこで利用できますか?
Cache API はすべての最新ブラウザで使用できます。内容
グローバル caches
プロパティで公開されているため、
単純な特徴検出で API を改良できます。
const cacheAvailable = 'caches' in self;
対応ブラウザ
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
を返します。
別の型の値を返します。
メソッド | 説明 |
---|---|
arrayBuffer |
本文を含む ArrayBuffer をシリアル化して返します。
あります。
|
blob |
Blob を返します。Response が作成された場合
Blob を使用すると、この新しい Blob は同じになります。
あります。それ以外の場合は、関数の Content-Type
Response が使用されます。
|
text |
本文のバイトを UTF-8 でエンコードされた文字列として解釈します。 |
json |
本文のバイトを UTF-8 でエンコードされた文字列として解釈し、
JSON として解析します結果のオブジェクトを返すか、または
文字列を JSON として解析できない場合は TypeError 。
|
formData |
本文のバイトを HTML フォームとして解釈し、
multipart/form-data または
application/x-www-form-urlencoded 。次を返します。
FormData
データを解析できない場合は TypeError をスローします。
|
body |
ReadableStream を返します。 トレーニングされます |
次に例を示します。
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 に初めて掲載されました