高度なキャッシュ制御

インストール

AI-Assisted セットアップを使用してプラグインをインストールできます。AI ツールに Capgo スキルを追加するには、以下のコマンドを実行してください。

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用してください。

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-asset-cache` plugin in my project.

もし、Manual Setup を好みますので、プラグインをインストールするには、以下のコマンドを実行してください。

npm install @capgo/capacitor-asset-cache
npx cap sync

インポート

import { AssetCache } from '@capgo/capacitor-asset-cache';

CDNを設定

アプリが起動したときに、CDNの基本URLを一度設定します。相対的なアセットのパスは、このURLに対して解決されます。

AssetCache.configure({
  cdnUrl: 'https://cdn.example.com/assets/',
  revalidate: {
    strategy: 'ttl',
    maxAgeSeconds: 86400,
  },
});

スキップできます cdnUrl 絶対URLを渡す場合、または bind, src, or resolve.

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

セクション: イメージまたはビデオをバインド

bind is the most transparent display path. It marks the element as loading, fetches or revalidates the asset natively, then assigns the local source URL when the local file is ready.

const image = document.querySelector<HTMLImageElement>('#hero');

if (image) {
  const binding = AssetCache.bind(image, 'images/hero.jpg');
  await binding.promise;
}

<img id="hero" alt="Product preview" />

img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
  opacity: 0.45;
}

img[data-asset-cache-state='ready'],
video[data-asset-cache-state='ready'] {
  opacity: 1;
}

注記

成功したパスでは、要素はCDN URLを受信せず、持続可能なストレージにアセットが存在する後、ローカルウェブビューURLを受信します。

レアクト

import { useEffect, useRef } from 'react';
import { AssetCache } from '@capgo/capacitor-asset-cache';

AssetCache.configure({ cdnUrl: 'https://cdn.example.com/assets/' });

export function HeroImage() {
  const imageRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (!imageRef.current) return;

    const binding = AssetCache.bind(imageRef.current, 'images/hero.jpg');
    return () => binding.cancel();
  }, []);

  return <img ref={imageRef} alt="Product preview" />;
}

ヴュー

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { AssetCache, type AssetCacheBinding } from '@capgo/capacitor-asset-cache';

const image = ref<HTMLImageElement | null>(null);
let binding: AssetCacheBinding | undefined;

onMounted(() => {
  if (image.value) {
    binding = AssetCache.bind(image.value, 'images/hero.jpg', {
      cdnUrl: 'https://cdn.example.com/assets/',
    });
  }
});

onUnmounted(() => binding?.cancel());
</script>

<template>
  <img ref="image" alt="Product preview" />
</template>

フレームワークの状態の直接ソース

使用 src フレームワークが既にロードとエラーの状態を制御している場合に使用します。ローカルファイルが存在するまでに、ローカルソース文字列が解決されるまでの約束が返されます。

const src = await AssetCache.src('videos/intro.mp4');

videoElement.src = src;

使用 resolve 必要な場合にメタデータも必要です:

const source = await AssetCache.resolve('images/hero.jpg');

console.log(source.src, source.local, source.fromCache, source.status);

保護されたアセット

ヘッダーをネイティブのフェッチに渡します。これは署名済みCDNパス、認証済みメディア、または短期間のトークンに便利です。

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

ヘッダーは、リモートファイルを取得したり、再検証したりする際にプラグインによって使用されます。画像または動画タグは、プラグインによって返されたローカルソースURLのみを受け取ります。

再検証

デフォルトの戦略を設定する configure または、1つのアセットにのみオーバーライドする

await AssetCache.src('videos/intro.mp4', {
  revalidate: {
    strategy: 'etag',
  },
});

利用可能な戦略:

戦略	使用する場合
never	キャッシュされたローカルファイルは、明示的に削除するまで十分です。
ttl	簡単な新鮮さのウィンドウが必要です。
always	プラグインが毎回リモートアセットをチェックするようにします。
etag	CDNは安定したETagヘッダを返します。
last-modified	CDNは信頼できるLast-Modifiedヘッダを返します。

データストレージとプライバシー

• iOSはファイルをApplication Supportに格納し、キャッシュルートをiCloudバックアップから除外します。
• Androidはアプリ内ファイルディレクトリにファイルを格納します。
• WebはブラウザのキャッシュAPIとlocalStorageメタデータを開発用のフォールバックとして使用します。
• キャッシュされたファイルはアプリサンドボックス内に隠されており、パブリックユーザーメディアに保存されていません。
• キャッシュされたファイルはアンインストール、データクリア、またはプラグインの削除時に削除されます。 clear() または remove().

キャッシュは持続的ですが、セキュリティの境界ではありません。機密情報を暗号化して、侵害されたデバイス上で読み取れないようにする必要がある場合は、キャッシュされた資産を暗号化してください。

高度なキャッシュ制御

Most UI code should use bind, src、または resolveを使用してください。明示的なキャッシュ管理が必要な場合にのみ、以下のヘルパーを使用してください:

メソッド	説明
get	リモートURLをネイティブファイルメタデータに解決します。
list	ディスク上にまだ存在するキャッシュされたアセットを返します。
getCacheSize	キャッシュされたバイトの合計を返します。
remove	指定されたキーまたはURLのキャッシュされたアセットを削除します。
clear	プラグインによって管理されているすべてのキャッシュされたアセットを削除します。

const asset = await AssetCache.get({
  url: 'https://cdn.example.com/assets/videos/intro.mp4',
  key: 'videos/intro.mp4',
  revalidate: { strategy: 'last-modified' },
});

フルリファレンス

• GitHub: https://github.com/Cap-go/capacitor-asset-cache/
• パッケージ: @capgo/capacitor-asset-cache