越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【JavaScript】ブラウザのストレージCache APIを試してみる

テクニック

【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に保存するなど、
これまで、取得と保存を別々で処理する必要があったものを、1つの処理で行うことができ、
これまで複雑だったFetchとストレージへの保存の処理を簡潔にできる可能性も秘めています。

今回は、Cache APIの仕組みを、初歩の初歩の部分ではありますが、試してみました。

↓作ってみたもの

https://codesandbox.io/embed/test-cache-api-with-react-fyc2rs?fontsize=14&hidenavigation=1&theme=dark

まず、caches.open(‘KEY’) でCache APIを呼び出します。
元々cachesに存在しないキーの場合、自動で新たに作成されるので、この時点では処理を分ける必要がありません。

次に、cache.match(‘URL’)でキャッシュ済みのデータを呼び出します(ここではURLと書きましたが、Requestオブジェクトでも可能です)。

この時点でCacheが存在しない場合、cache.match()からはundefinedが返ってくるので、
その場合は、Cacheが存在しない場合の出し分けが必要です。
今回は、cache.add(‘URL’)でResponseデータを取得し、cacheに保存します。

.add メソッドは、fetchの機能を内蔵しているので、わざわざcache前にfetchする処理を書く必要はありません。
fetchの処理をあえて分けたい場合、cache.put(‘URL’) を使うことで、処理を分けることもできます。

Cache APIはRequestとResponseをそのまま保存しているので、
.match メソッドで取り出したデータはfetchで取得したResponseと同じ形式で処理できます(というかResponseそのものです)。

fetchしたデータと保存したデータで処理を分ける必要がなくなるので、
使い慣れると重宝しそうです。

↓こちらのサイトで紹介されているように、スクロール位置などのページごとのデータをheaderの情報としてCache APIに保存するような使い方もあるようです。
Cache API を利用したフロントエンドキャッシュ – ボクココ

参考にさせていただいたサイトa

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。