ガイド
Capacitorでアセットキャッシュを使用する方法
@capgo/capacitor-asset-cacheを使用して
@capgo/capacitor-asset-cache アプリ所有の永続ストレージに大規模なCDN画像とビデオを保存し、CapacitorのWebビュー用にローカルソースURLを返します。
インストール
npm install @capgo/capacitor-asset-cache
npx cap sync
このプラグインが公開するもの
bind- 画像または動画要素をローカルアセットソースに結び付け、利用可能になったときに更新します。src- アセットがローカルに存在する後、ローカルソースの文字列を返します。resolve- アセットがローカルに存在する後、ローカルソースとキャッシュメタデータを返します。configure- デフォルトのCDNと再検証の動作を設定します。get,list,remove,clear, andgetCacheSize- 使用例
- 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');
}
- native fetchが実行されるとき、ローカルソースのURLを受け取り、 data-asset-cache-state="loading" - 保護されたアセット ready.
img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
opacity: 0.45;
}
- プラグインはリモートファイルをフェッチまたは再検証するときにヘッダーを送信します。ウェブ要素はローカルソースのURLのみを受け取ります。
-
const src = await AssetCache.src('private/videos/intro.mp4', {
cdnUrl: 'https://cdn.example.com/assets/',
headers: {
Authorization: `Bearer ${token}`,
},
});
CDNベースURLなし
__CAPGO_KEEP_0__を使用する場合、絶対URLを指定してください cdnUrl.
const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');
相対パスは、CDNベースURLを設定した場合または呼び出しごとに設定した場合にのみ機能します cdnUrl CDNベースURLを設定しない場合、または呼び出しごとに設定する場合 cdnUrl.
ストレージに関する注意
iOSでは、ファイルはアプリケーションサポートディレクトリ下にあり、iCloudバックアップから除外されます。 Androidでは、ファイルはアプリ内ファイルディレクトリ下にあります。システムは、これらのファイルを廃棄可能なキャッシュファイルとして扱いませんが、アンインストール、データクリア、 clear()、ファイルは削除されます。 remove() 完全なリファレンス
__CAPGO_KEEP_0__:
- GitHub: https://github.com/Cap-go/capacitor-asset-cache/
- __CAPGO_KEEP_0__:
Capgoから@capgo/capacitor-asset-cacheを継続して使用
Capgoを使用している場合 Using @capgo/capacitor-asset-cache persistent media loading を計画するには、接続する @capgo/capacitor-asset-cacheの実装詳細については CapgoのGetting Started @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-downloaderを使用して明示的なバックグラウンドダウンロードを実行し CapgoのGetting Started @capgo/capacitor-fileを使用して一般的なローカルファイルアクセス @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-asset-cacheを使用してください @capgo/capacitor-asset-cacheの詳細については Capgoのドキュメントを参照してください