JavaScriptのキャッシュAPI

JavaScriptでCache APIを使用してリソースをキャッシュする方法を学びます。

Cache API は、サービスワーカーがキャッシュするリソースを制御できるようにします。Cache API を使用すると、サービスワーカーはオフラインで使用するリソースをキャッシュし、後で取り出すことができます。

キャッシュ・サポートの検出

キャッシュ・オブジェクトがウィンドウで使用可能かどうかを確認します。

javascript
let foo = 'caches' in window;

キャッシュは、CacheStorage のインスタンスです。

キャッシュの作成/初期化

open メソッドを使用すると、名前を指定してキャッシュを作成することができます。

javascript
caches.open('cacheName').then( cache => {
});

• 他のソースに設定されたキャッシュにはアクセスできません。
• 作成するキャッシュは、あなたのドメイン用に作成されます。
• 同じドメインに対して複数のキャッシュを追加することができ、caches.keys() からアクセスできます。

キャッシュへのアイテムの追加

リソースをキャッシュするには、add、addAll および set の 3 つのメソッドを使用します。 add() および addAll() メソッドでは自動的にリソースを取得してキャッシュし、 set メソッドではデータを取得してキャッシュを設定します。

add

javascript
let cacheName = 'userSettings'; 
let url = '/api/get/usersettings';
caches.open(cacheName).then( cache => {
 cache.add(url).then( () => {
 console.log("Data cached ")
 });
});

/api/get/usersettings 上記のコードでは、urlに対する内部リクエストがサーバーに送信され、データが受信されるとレスポンスがキャッシュされます。

addAll

addAll は URL の配列を受け取り、すべてのリソースがキャッシュされたときに Promise を返します。

javascript
let urls = ['/get/userSettings?userId=1', '/get/userDetails'];
caches.open(cacheName).then( cache => {
cache.addAll(urls).then( () => {
 console.log("Data cached ")
 });
});

Cache.add / Cache.addAll; 200の範囲外のResponse.status値を持つ応答をキャッシュしません。Cache.putを使用すると、任意の要求/応答のペアを保存できます。

put

put は、現在の Cache オブジェクトにキーと値のペアを追加します。 put では、要求を取得し、値を手動で設定する必要があります。

注意: put() は、リクエストにマッチする、以前にキャッシュに保存されていたキーと値のペアを上書きします。

javascript
let cacheName = 'userSettings';
let url = '/api/get/userSettings';
fetch(url).then(res => {
 return caches.open(cacheName).then(cache => {
 return cache.put(url, res);
 })
})

キャッシュからの取得

cache.match() を使用して、URLに格納されているレスポンスを取得します。

javascript
const cacheName = 'userSettings'
const url = '/api/get/userSettings'
caches.open(cacheName).then(cache => {
 cache.match(url).then(settings => {
 console.log(settings);
 }
});

のようなレスポンスオブジェクトです。

javascript
Response {
 body: (...),
 bodyUsed: false,
 headers: Headers,
 ok: true,
 status: 200,
 statusText: "OK",
 type: "basic",
 url: "https://test.com/api/get/userSettings"
}

キャッシュ内の全アイテムを取得

キャッシュオブジェクトには、現在のキャッシュオブジェクトのすべての URL を持つキーメソッドが含まれます。

javascript
caches.open(cacheName).then( (cache) => { 
 cache.keys().then((arrayOfRequest) => { 
 console.log(arrayOfRequest); // [Request, Request]
 });
});

arrayOfRequestは、リクエストについてのすべての詳細を含むRequestオブジェクトの配列です。

すべてのキャッシュの取得

javascript
caches.keys().then(keys => {
 // keysはキーのリストを含む配列である。
})

キャッシュからのアイテムの削除

キャッシュ・オブジェクトで delete メソッドを使用すると、特定のキャッシュ要求を削除できます。

javascript
let cacheName = userSettings; 
let urlToDelete = '/api/get/userSettings';
caches.open(cacheName).then(cache => {
 cache.delete(urlToDelete)
})

キャッシュの完全削除

javascript
caches.delete(cacheName).then(() => {
 console.log('Cache successfully deleted!');
})