ガイド
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と再検証（revalidation）の挙動を設定します。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" ネイティブのfetchが実行されている間、ローカルのソース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 一般的なローカルファイルへのアクセス用。