Using @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache アプリ所有の永続ストレージに大きなCDN画像や動画を保存し、ローカルソースURLをCapacitorのWebビューに返します。

インストール

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;
}

保護されたアセット

プラグインがリモートファイルをフェッチまたは再検証するときにヘッダーを送信します。ウェブ要素は、ローカルソースのURLのみを受け取ります。

const src = await AssetCache.src('private/videos/intro.mp4', {
  cdnUrl: 'https://cdn.example.com/assets/',
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

CDNベースURLなし

CDNベースURLを設定しない場合は、絶対URLを渡します。 cdnUrl.

const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');

相対パスは、既に設定された cdnUrl または、呼び出しごとに cdnUrl.

ストレージの注意

iOSでは、ファイルはアプリケーションサポート下にあり、iCloudバックアップから除外されます。 Androidでは、ファイルはアプリの内部ファイルディレクトリ下にあります。システムは、これらのファイルを廃棄可能なキャッシュファイルとして扱いませんが、アンインストール、データクリア、 clear()、 remove() ファイルが削除されます。

フルリファレンス

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

ドキュメント: /docs/plugins/asset-cache/ 使用@capgo/capacitor-アセットキャッシュ を使用して、永続的なメディアの読み込みを計画し、 @capgo/capacitor-asset-cache @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-アセットキャッシュの実装詳細については、 Getting Started @capgo/capacitor-downloader @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ダウンローダ @capgo/capacitor-file @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ファイル

アセット キャッシュ