Tips: fetchしたデータをBlobに変換してIndexedDBに保存する

初めに

では、Base64でデータの保存を行いましたが、IndexedDBはBlobデータのままでも
データの保存を行うことが可能です。
この記事では、fetchしたデータをBlobに変換し、IndexedDBに保存する方法について記事にします。

IndexedDBとは

IndexedDBとは、ブラウザに多様なデータを保存するためのAPIです。
詳しくは↓をご覧ください。

↓に記載の通り、IndexedDBにはBlob形式のオブジェクトも保存が可能です。

実装

今回も前回の記事と同じく

を用いて実装します。
コードは以下の通りです。

import { set, get, clear } from "idb-keyval";

export const getAudioCache = async (url: string) => {
  const blob = await get<Blob>(url);
  return URL.createObjectURL(blob);
};

export const cacheAudio = async (url: string) => {
  const response = await fetch(url);
  const blob = await response.blob();
  await set(url, blob);
  return data;
};

export const clearAudioCache = async () => {
  await clear();
};

前回の記事と異なる点は以下の二つです。

getAudioCache

Blobデータをそのまま返すのではなく、urlを引数でとっているためそのままURLで返すようなインターフェースに変更しました。
BlobデータをURLに変更するため、URL.createObjectUrlを用いています。

これにより、cacheAudioを利用する、しないに関わらず外部の処理の実装はほとんど変化させずに利用できると思います。

cacheAudio

こちらは前回の記事ではBase64に変換する処理にしていましたが、今回はBlobをそのまま保存するようにしています。