ガイド
Capacitor で Asset Cache を使う方法
@capgo/capacitor-asset-cache の使い方
@capgo/capacitor-asset-cache 大きな CDN 画像や動画をアプリが所有する永続ストレージに保存し、Capacitor の WebView 用にローカルソース URL を返します。
インストール
npm install @capgo/capacitor-asset-cache
npx cap sync
このプラグインで利用可能な機能
bind- ローカルアセットソースに画像や動画要素をバインドし、準備が整ったら更新します。src- アセットがローカルに存在するようになったら、ローカルソースの文字列を返します。resolve- ローカルソースとキャッシュメタデータを返します。configure- デフォルトのCDNと再検証の動作を設定します。get,list,remove,clearやgetCacheSize- 必要に応じてキャッシュを明示的に管理します。
使用例
CDNを一度設定し、相対パスで要素をバインドします:
import { AssetCache } from '@capgo/capacitor-asset-cache';
AssetCache.configure({
cdnUrl: 'https://cdn.example.com/assets/',
revalidate: {
strategy: 'ttl',
maxAgeSeconds: 86400,
},
});
const hero = document.querySelector<HTMLImageElement>('#hero');
if (hero) {
AssetCache.bind(hero, 'images/hero.jpg');
}
要素は data-asset-cache-state="loading" が設定され、ネイティブフェッチが実行された後、ローカルソースURLを受け取って ready.
img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
opacity: 0.45;
}
保護されたアセット
プラグインがリモートファイルをフェッチまたは再検証する際、ヘッダーが送信されます。Web要素には引き続きローカルのソースURLのみが渡されます。
const src = await AssetCache.src('private/videos/intro.mp4', {
cdnUrl: 'https://cdn.example.com/assets/',
headers: {
Authorization: `Bearer ${token}`,
},
});
CDN Base URLを使用しない場合
設定したくない場合は、絶対URLを渡してください cdnUrl.
const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');
相対パスを使用するには、設定済みの cdnUrl または呼び出しごとの cdnUrl.
ストレージに関する注意点
iOSでは、ファイルはApplication Support内に保存され、iCloudバックアップの対象外となります。Androidでは、アプリの内部ファイルディレクトリに保存されます。システムはこれらのファイルを使い捨てのキャッシュとは見なしませんが、アンインストールやアプリデータの消去により、 clear()や remove() ファイルは削除されます。
リファレンス全文
- GitHub: https://github.com/Cap-go/capacitor-asset-cache/
- ドキュメント: /docs/plugins/asset-cache/
@capgo/capacitor-asset-cache の利用から続けて
使用している場合 @capgo/capacitor-asset-cache の使い方 永続的なメディア読み込みを計画し、 @capgo/capacitor-asset-cache 実装の詳細については、 スタートガイド 実装の詳細については、 @capgo/capacitor-downloader 明示的なバックグラウンドダウンロードには @capgo/capacitor-file 一般的なローカルファイルアクセスに使用します。