キャッシュAPIの最初のステップ

投稿日: 2022-04-20 2022-10-05
タグ: javascript

Cache APIは、 ServiceWorkersがリソースのキャッシュをより詳細に制御できるようにするために作成されました。

Cache APIを介して、Service Workerは、オフラインで使用するためにリソースをキャッシュし、後でそれらを取得することを決定できます。

リソースとは、HTMLページ、CSS、JavaScriptファイル、画像、JSON、およびWebページやWebアプリで使用できるその他のリソースなどのURLからの完全な応答を意味します。

ブラウザのサポート

サポートされているブラウザを詳しく説明せずに、最近のWebテクノロジについて話すことはできません。

キャッシュAPIの場合、次のことについて話します。

Firefox39以降
Chrome40以降
Opera29以降
Safari11.1以降
iOSSafari11.4以降
エッジ17以降
UCBrowser11.8以降
Chrome forAndroid67以降

InternetExplorerはサポートされていません。

FirefoxとChromeを除いて、他のブラウザでのサポートが最近導入されたので、これを覚えておく必要があります。

上記のブラウザを実行するユーザー以外のユーザーをサポートする予定の場合、サイトとアプリケーションには、このチェック内にキャッシュAPIコードが含まれている必要があります。

if ('caches' in window) {
  // The Cache API is supported

  // You can add your code here
}

キャッシュの操作

if ('caches' in window) {
  // The Cache API is supported
  const cacheName = 'my-website-cache'
  caches.open(cacheName).then(cache => {
    // you can start using the cache
  })
}

キャッシュは現在のオリジン（ドメイン）にリンクされており、セキュリティとプライバシー上の理由から、他のユーザー用に設定されたキャッシュにアクセスすることはできません。

いくつかの異なるキャッシュを設定できます。現在のオリジンに設定されているすべてのキャッシュを確認するには、繰り返し処理します。 caches.keys():

caches.keys().then(keys => {
  keys.map(key => {
    console.log(key)
  })
})

を呼び出すことにより、1つのキャッシュを削除できます delete() 方法：

const cacheName = 'my-website-cache'
caches.delete(cacheName).then(() => {
  console.log('Cache deleted')
})

キャッシュに追加する

3つの方法があります。

cache.put()
cache.add()
cache.addAll()

あなたが呼ぶ cache.put() の成功したpromiseコールバックで fetch() 電話：

const cacheName = 'my-website-cache'
const url = '/resource'
fetch(url).then(res => {
  return caches.open(cacheName).then(cache => {
    return cache.put(url, res)
  })
})

と cache.add() リソースをキャッシュに追加する前に手動でリソースをフェッチする必要はありません。CacheAPIがこれを自動的に作成します。

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.add(url).then(() => {
    //done!
  }
})

この場合、次のようになります。 cache.add() 呼び出し、フェッチ要求がサーバーに送信され、応答がキャッシュされます。

cache.addAll() 複数のURLへのリクエストを実行するために使用されます。コールバック関数は、すべてのリソースがフェッチおよびキャッシュされた場合にのみ呼び出されます。

const cacheName = 'my-website-cache'
const url1 = '/resource1'
const url2 = '/resource2'
caches.open(cacheName).then(cache => {
  cache.addAll([url1, url2]).then(() => {
    //all requests were cached
  })
})

キャッシュからの取得

使用する cache.match() クエリに一致するURLに対応して保存されたResponseオブジェクトを取得できます。

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.match(url).then(item => {
    console.log(item)
  }
})

item はリクエストオブジェクトであり、これを検査できます。たとえば、次の方法でURLを取得できます。 item.url.

キャッシュ内のすべてのアイテムを反復処理します

使用する cache.keys() キャッシュに存在するすべてのアイテムを取得し、それらを反復処理できます。

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.keys().then(items => {
    items.map(item => {
      console.log(item)
    })
  }
})

各アイテムはRequestオブジェクトです。

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

リソースがキャッシュに追加されると、ブラウザのストレージである程度のスペースを占有します。元のURLで保存したものを手動でクリアして、 cache.delete() 方法：

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.delete(url).then(() => {
    //deleted successfully!
  }
})

getdocs

13036