ガイド
アセット キャッシュのチュートリアル
Using @capgo/capacitor-asset-cache
@capgo/capacitor-asset-cache CapacitorのCDN画像や動画をアプリ所有の永続ストレージに保存し、ローカルソースURLを返します。
インストール
npm install @capgo/capacitor-asset-cache
npx cap sync
このプラグインが公開するもの
bind- ローカルアセットソースに画像または動画要素を追加し、ローカルに存在するときに更新します。src- アセットがローカルに存在するときにローカルソース文字列を返します。resolve- __CAPGO_KEEP_0__をローカルソースとキャッシュメタデータを含む。configure- デフォルトのCDNと再検証の動作を設定。get,list,remove,clear,getCacheSizeと
- 必要に応じてキャッシュを明示的に管理。
Example Usage
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');
}
CDNを一度設定し、相対パスの要素をバインドする: data-asset-cache-state="loading" 要素は ready.
img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
opacity: 0.45;
}
native fetchが実行されるとき、ローカルソースURLを受け取り
Protected Assets
const src = await AssetCache.src('private/videos/intro.mp4', {
cdnUrl: 'https://cdn.example.com/assets/',
headers: {
Authorization: `Bearer ${token}`,
},
});
ヘッダーは、リモートファイルをフェッチまたは再検証する際にプラグインによって送信されます。ウェブ要素は、ローカルソースURLのみを受け取ります。
CDN Base URLを設定しない場合 cdnUrl.
const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');
相対パスは、またはコール毎に cdnUrl ストレージの注意 cdnUrl.
iOSでは、ファイルはアプリケーションサポート下にあり、iCloudバックアップから除外されます。 Androidでは、ファイルはアプリ内ファイルディレクトリ下にあります。システムは、これらのファイルを廃棄可能なキャッシュファイルとして扱いませんが、アンインストール、データ消去、
、 clear()ファイルが削除されます。 remove() フルリファレンス
__CAPGO_KEEP_0__:
- https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-asset-cache/ https://github.com/Cap-go/capacitor-asset-cache/
- __CAPGO_KEEP_0__の@__CAPGO_KEEP_1__-asset-cacheを使用している場合
Keep going from Using @capgo/capacitor-asset-cache
Capacitor @capgo/capacitor-asset-cache を使用して、永続的なメディアの読み込みを計画し、 @capgo/capacitor-asset-cache の実装詳細について Getting Started の実装詳細について @capgo/capacitor-downloader の明示的なバックグラウンドダウンロードのために、 @capgo/capacitor-file の一般的なローカルファイルアクセス用に、