ユーザーが複数の大容量ファイルをアップロード中に、ブラウザがクラッシュしたりネットワークが切断されたりして進捗がすべて失われる——このような体験を回避するために、開発者はどのようにデータの一貫性と復元性を確保すべきでしょうか？Uppyの「キュー永続化」機能はまさにこの課題を解決するための仕組みです。本稿では、異なるストレージバックエンドの特性を比較し、用途に応じた最適な構成方法を解説します。
アップロードキュー永続化とは
これは、ファイルのメタ情報や部分的なバイナリデータをクライアント側（主にブラウザ内）に一時保存し、ページ再読み込みやブラウザ再起動後も中断したアップロードを再開できるようにする仕組みです。特に動画投稿プラットフォームやCMSなど、大容量ファイルの取り扱いが多いサービスで有効です。
UppyではGoldenRetrieverプラグインがこの役割を担い、以下の3層アーキテクチャで実装されています：
- メタデータ層：LocalStorageにJSON形式で保存
- 中間データ層：IndexedDBでBlobを格納（50MB未満推奨）
- 大容量層：Service Worker経由でチャンク分割保存
各ストレージ方式の比較と選定基準
| 項目 | LocalStorage | IndexedDB | Service Worker |
|---|---|---|---|
| 最大容量 | 約5MB | ディスク依存（理論無制限） | ブラウザ割当次第 |
| 対応データ型 | 文字列のみ | 任意のJSオブジェクト/Blob | Blob/ArrayBuffer中心 |
| 同期/非同期 | 同期（UIブロックあり） | 非同期（トランザクション対応） | 非同期（別スレッド） |
| 推奨用途 | ファイル名・サイズ等のメタ情報 | 画像・PDF等の中規模ファイル | 動画・圧縮ファイル等の大容量データ |
実用的な設定例
以下は、ユースケースに応じた設定サンプルです。
// 高機能モード：大容量ファイル向け
const uploader = new Uppy()
uploader.use(GoldenRetriever, {
expiration: 86400000, // 24時間保持
enableWorker: true, // Service Worker有効化
dbConfig: {
dbName: 'enterprise-uploads',
version: 2
}
});
// 軽量モード：低スペック端末向け
uploader.use(GoldenRetriever, {
enableWorker: false,
useIndexedDB: false, // Blob保存を無効化
onlyMetadata: true // メタ情報のみ保存
});
運用上のベストプラクティス
- 自動クリーンアップ：
expiration値を明示的に設定し、不要データを削除 - 互換性対応：IndexedDB非対応環境ではメタ情報のみ保存する降格処理を実装
- セキュリティ対策：機密ファイルには
skipPersistence: trueフラグを付与
高度なカスタマイズが必要な場合は、独自のストレージアダプターを実装可能です。例えば、暗号化ミドルウェアを挟んだり、クラウド同期機能を追加することもできます。公式APIリファレンスを参照しながら、プロジェクトの要件に合わせて柔軟に調整してください。