JavaScriptのキャッシュAPI

JavaScriptのCache APIキャッシュリソースの使用方法について説明します.
Cache APIでは、キャッシュするリソース(HTMLページ、CSS、JavaScriptファイル、ピクチャ、JSONなど)をサービス関係者が制御できます.Cache APIでは、サービス関係者はオフラインで使用するためにリソースをキャッシュし、後で取得できます.
Cacheサポートの検出cachesオブジェクトがwindowで使用可能かどうかを確認します.

let isCacheSupported = 'caches' in window;

cachesはCacheStorageの一例である.
Cacheの作成/初期化openメソッドを使用して、nameを持つキャッシュを作成できます.これはpromiseを返します.キャッシュが既に存在する場合、新しいキャッシュは作成されません.

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

他のソース(ドメイン)に設定されたキャッシュにアクセスできません.

作成中のキャッシュは、ドメインのために作成されます.

同じドメインに複数のキャッシュを追加できます.caches.keys()からアクセスできます.

キャッシュにアイテムを追加
リソースをキャッシュするには、3つの方法add,addAll,setを使用します.add()メソッドおよびaddAll()メソッドは、自動的にリソースを取得してキャッシュしますが、setメソッドでは、データを取得してキャッシュを設定します.
add

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

上記のコードでは、/api/get/usersettingsurlに対する内部要求がサーバに送信され、データが受信されると応答がキャッシュされる.
addAll addAllURL配列を受け入れ、すべてのリソースをキャッシュしたときにPromiseを返します.

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キャッシュしないResponse.status値が200の範囲内でない応答、Cache.putは、要求/応答ペアを格納することができます.
put put現在のCacheオブジェクトにkey/valueペアを追加します.putでは、リクエストを手動で取得し、値を設定する必要があります.
注:put()は、以前キャッシュに格納されていた要求に一致するキー/値ペアを上書きします.

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に格納されたResponseを得ることができる.

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

settingsは、応答オブジェクトであり、

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

キャッシュ内のすべてのアイテムを取得cacheオブジェクトには、現在キャッシュされているオブジェクトのurlをすべて持つkeysメソッドが含まれます.

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

ArrayOfRequestはリクエストに関するすべての詳細を含むRequestオブジェクト配列です.
すべてのキャッシュを取得

caches.keys().then(keys => {
  // keys     ，        
})

キャッシュからアイテムを削除cacheオブジェクトに対してdeleteメソッドを使用して、特定のキャッシュ要求を削除できます.

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

キャッシュを完全に削除

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