メインコンテンツへスキップ

@capgo/capacitor-asset-cache

CDN上の画像や動画をアプリの永続ストレージにキャッシュし、ローカルメディアソースとして利用可能にします

ローカル限定の表示ソース

src, resolve、および bind ローカルファイルが存在する場合のみソースを返します。imgやvideoタグにはローカルのwebview URLが渡されます。

永続的なネイティブストレージ

キャッシュされたアセットは、システムが容量不足時に削除する可能性のあるプラットフォームのキャッシュフォルダではなく、アプリ専用の永続ストレージに保存されます。

保護されたCDNのサポート

Web要素はローカルファイルのみをロードしますが、署名付きまたは認証が必要なアセットに対してネイティブのfetchへヘッダーを渡すことができます。

フレームワークに親和性の高いバインディング

ネイティブのキャッシュ解決を、通常のHTML、React refs、Vue refs、またはimgやvideoのsrcを指定できるあらゆるフレームワークにバインドできます。

CDNの画像や動画をアプリの永続ストレージにキャッシュし、ローカルのメディアソースとしてバインドします

まずはここから cancel() および以下に示すその他のコアメソッドです。

プラットフォームサポート備考
iOSはいネイティブ
Androidはいネイティブ
WebいいえCapacitor.getPlatform() でガードする

アプリで、通常のストレージ圧迫があっても保持したい重いリモートメディアを表示する場合は、Asset Cacheを使用してください:

  • CDNから配信されるオンボーディング動画やマーケティング動画
  • セッションをまたいで再利用されるヒーロー画像、ギャラリー、画像シーケンス
  • リクエストヘッダーが必要な保護されたメディア
  • 以前に取得済みのローカルアセットで足りる、オフライン耐性のある画面
  • Capacitor アプリにおいて、 <img> と <video> 保護されたURLを直接フェッチすべきではありません
  • configure(options) デフォルトのCDNと再検証の挙動を設定します。
  • bind(element, path, options?) ローカルファイルの準備ができたら、画像またはビデオ要素を更新します。
  • src(path, options?) フレームワークの状態管理用に、ローカルのソース文字列を返します。
  • resolve(path, options?) ローカルのソースとキャッシュのメタデータを返します。
  • get(options) リモートURLを、永続的なネイティブファイルのメタデータに解決します。
  • remove(options) キーまたはURLを指定して、キャッシュされたアセットを1つ削除します。
  • clear() プラグインが管理するすべてのキャッシュ済みアセットを削除します。
  • list() ディスク上にまだ存在するキャッシュ済みアセットを返します。
  • getCacheSize() キャッシュされている合計バイト数を返します。
  • getPluginVersion() ネイティブ実装のバージョンマーカーを返します。

アセットごとに、またはデフォルト設定を通じて、以下の方法でキャッシュを確認できます:

Strategy挙動
neverローカルファイルが存在する場合はそれを使用します。
ttl経過後に再ダウンロード maxAgeSeconds.
always呼び出しのたびに再検証を行い、既知のバリデーターを送信します。
etag既知のHTTP ETagバリデーターが存在する場合はそれを使用します。
last-modified既知のHTTP Last-Modifiedバリデーターが存在する場合はそれを使用します。

iOSでは、ファイルはApplication Support内に保存され、キャッシュルートはiCloudバックアップから除外されます。Androidでは、ファイルはアプリの内部ファイルディレクトリに保存されます。

キャッシュはアプリのサンドボックス内に隠され、ユーザーの公開メディアとして表示されることはありません。アプリのアンインストール時、ユーザーがアプリデータを消去した時、またはアプリが次を呼び出した時に削除されます: clear() または remove().

@capgo/capacitor-asset-cache から続ける

セクション「@capgo/capacitor-asset-cache から続ける」

以下を使用している場合: @capgo/capacitor-asset-cache 永続メディアの読み込みを計画するには、次と組み合わせてください: はじめに 実装の詳細については、 @capgo/capacitor-downloader 明示的なバックグラウンドダウンロードには、 @capgo/capacitor-file 一般的なローカルファイルへのアクセスには、 @capgo/capacitor-asset-cache を使用して チュートリアルを進めます。