キャッシュAPIガイド

CacheAPIはServiceWorker仕様の一部であり、リソースのキャッシュをさらに強化するための優れた方法です。

前書き

CacheAPIはServiceWorker仕様の一部であり、リソースのキャッシュをさらに強化するための優れた方法です。

それはあなたがすることができますURLアドレス可能なリソースをキャッシュする、これはアセット、Webページ、HTTPAPI応答を意味します。

それはないデータの個々のチャンクをキャッシュすることを意味します。これは、IndexedDB API。

現在、Chrome> = 40、Firefox> = 39、Opera> = 27で利用できます。

SafariとEdgeは最近、そのサポートを導入しました。

InternetExplorerはそれをサポートしていません。

モバイルサポートはAndroidで有効であり、AndroidWebviewとChromefor Androidでサポートされていますが、iOSではOperaMobileとFirefoxMobileのユーザーのみが利用できます。

キャッシュAPIが利用可能かどうかを検出します

キャッシュAPIは、cachesオブジェクト。 APIがブラウザに実装されているかどうかを検出するには、以下を使用してAPIの存在を確認します。

if ('caches' in window) {
  //ok
}

キャッシュを初期化する

使用caches.openを返すAPI約束するとともにキャッシュオブジェクト使用する準備ができました：

caches.open('mycache').then(cache => {
  // you can start using the cache
})

mycache初期化するキャッシュを識別するために使用する名前です。変数名のようなもので、好きな名前を使用できます。

キャッシュがまだ存在しない場合は、caches.openそれを作成します。

キャッシュにアイテムを追加する

ザ・cacheオブジェクトは、アイテムをキャッシュに追加するための2つのメソッドを公開します。addそしてaddAll。

cache.add()

add単一のURLを受け入れ、呼び出されると、リソースをフェッチしてキャッシュします。

caches.open('mycache').then(cache => {
  cache.add('/api/todos')
})

文字列の代わりにフェッチをより細かく制御できるようにするには、リクエストオブジェクト、の一部フェッチAPI仕様：

caches.open('mycache').then(cache => {
  const options = {
    // the options
  }
  cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAll配列を受け入れ、を返します約束するすべてのリソースがキャッシュされたとき。

caches.open('mycache').then(cache => {
  cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
    //all requests were cached
  })
})

手動でフェッチして追加

cache.add()リソースを自動的にフェッチし、キャッシュします。

キャッシュAPIは、これを介してよりきめ細かい制御を提供しますcache.put()。リソースをフェッチしてから、キャッシュAPIに応答を保存するように指示する必要があります。

const url = '/api/todos'
fetch(url).then(res => {
  return caches.open('mycache').then(cache => {
    return cache.put(url, res)
  })
})

キャッシュからアイテムを取得する

cache.match()を返します応答ネットワーク要求の要求と応答に関するすべての情報を含むオブジェクト

caches.open('mycache').then(cache => {
  cache.match('/api/todos').then(res => {
    //res is the Response Object
  })
})

キャッシュ内のすべてのアイテムを取得します

caches.open('mycache').then(cache => {
  cache.keys().then(cachedItems => {
    //
  })
})

cachedItemsの配列ですリクエスト内のリソースのURLを含むオブジェクトurlプロパティ。

利用可能なすべてのキャッシュを取得します

ザ・caches.keys()メソッドは、使用可能なすべてのキャッシュのキーを一覧表示します。

caches.keys().then(keys => {
  // keys is an array with the list of keys
})

キャッシュからアイテムを削除します

与えられたcacheオブジェクト、そのdelete()メソッドは、キャッシュされたリソースをそこから削除します。

caches.open('mycache').then(cache => {
  cache.delete('/api/todos')
})

キャッシュを削除する

ザ・caches.delete()メソッドはキャッシュ識別子を受け入れ、実行されると、キャッシュとそのキャッシュされたアイテムをシステムからワイプします。

caches.delete('mycache').then(() => {
  // deleted successfully
})

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル：


Tech Wiki Online！