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)
})
})
delete()メソッドを呼び出すことにより、1つのキャッシュを削除できます。
const cacheName = 'my-website-cache'
caches.delete(cacheName).then(() => {
console.log('Cache deleted')
})
キャッシュに追加する
3つの方法があります。
cache.put()cache.add()cache.addAll()
fetch()呼び出しの成功したpromiseコールバックでcache.put()を呼び出します。
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()を使用すると、リソースをキャッシュに追加する前に手動でリソースをフェッチする必要がありません。キャッシュAPIにより、リソースが自動的に取得されます。
const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
cache.add(url).then(() => {
//done!
}
})
この場合、cache.add()呼び出しに続いて、 Fetch request がサーバーに送信され、応答がキャッシュされます。
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は、リクエストオブジェクトであり、これを検査できます。たとえば、item.urlを使用して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!
}
})
