2022/08/26
【JavaScript】ブラウザのストレージCache APIを試してみる
Cookie、WebStorage、IndexedDBなど、様々なブラウザのストレージがありますが、
これらはサーバーから取得したデータを任意の形に整形して必要な部分だけを保存するための仕組みです。
一方のCache APIは、基本的にはサーバーから取得したデータを、そのままの形でブラウザに保管します。
現代のブラウザは、画像やフォント、CSSやJS、そしてFetchしたデータなどを自動的にキャッシュしますが、それらはブラウザ側で管理されており、キャッシュの開放などはブラウザ側のタイミングに依存します。
サーバーから取得したデータを、任意のタイミングでキャッシュ、更新、削除しやすくするための仕組みが、Cache APIです。
Cookie、WebStorage、indexedDBではデータのみを保管するのに対して、
Cache API では、RequestとResponseをセットで保管するという特性があります。
データのRequestとResponseをそのまま保管しているため、Fetch等のデータと同様に扱うことができ、
headerの情報や、ステータスに応じて処理を分けるなど、
Request、Responseの特性に合わせた細やかな処理が可能になります。
また、Cache API は .add メソッドなど、fetchを内部的に行ってそのままcacheに保存するなど、
これまで、取得と保存を別々で処理する必要があったものを、１つの処理で行うことができ、
これまで複雑だったFetchとストレージへの保存の処理を簡潔にできる可能性も秘めています。
今回は、Cache APIの仕組みを、初歩の初歩の部分ではありますが、試してみました。
↓作ってみたもの
まず、caches.open(‘KEY’) でCache APIを呼び出します。
元々cachesに存在しないキーの場合、自動で新たに作成されるので、この時点では処理を分ける必要がありません。
|
1 | const cache = await caches.open("example"); |
次に、cache.match(‘URL’)でキャッシュ済みのデータを呼び出します（ここではURLと書きましたが、Requestオブジェクトでも可能です）。
|
1 | let cachedData = await cache.match("/example.json"); |
この時点でCacheが存在しない場合、cache.match()からはundefinedが返ってくるので、
その場合は、Cacheが存在しない場合の出し分けが必要です。
今回は、cache.add(‘URL’)でResponseデータを取得し、cacheに保存します。
|
1 2 3 4 | if (!cachedData?.status) { await cache.add("/example.json"); cachedData = await cache.match("/example.json"); } |
.add メソッドは、fetchの機能を内蔵しているので、わざわざcache前にfetchする処理を書く必要はありません。
fetchの処理をあえて分けたい場合、cache.put(‘URL’) を使うことで、処理を分けることもできます。
|
1 2 3 4 5 6 7 8 | if (!cachedData?.status) { const response = await cache.fetch("/example.json"); if (!response.ok) { throw new TypeError('Bad response status'); } await cache.put("/example.json", response); cachedData = await cache.match("/example.json"); } |
Cache APIはRequestとResponseをそのまま保存しているので、
.match メソッドで取り出したデータはfetchで取得したResponseと同じ形式で処理できます（というかResponseそのものです）。
|
1 2 | // JSONにしてデータを取り出す const json = await cachedData.json(); |
fetchしたデータと保存したデータで処理を分ける必要がなくなるので、
使い慣れると重宝しそうです。
↓こちらのサイトで紹介されているように、スクロール位置などのページごとのデータをheaderの情報としてCache APIに保存するような使い方もあるようです。
Cache API を利用したフロントエンドキャッシュ – ボクココ
参考にさせていただいたサイトa
- Cache – Web API | MDN
- Cache API を利用したフロントエンドキャッシュ – ボクココ
Author Profile
SHARE
