资源缓存 Capacitor 插件

使用 @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache 将大型 CDN 图片和视频存入应用自有的持久化存储，然后为 Capacitor WebView 返回本地源 URL。

安装

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

插件暴露的内容

• bind - 将图片或视频元素绑定到本地资源 source，并在就绪时更新。
• src - 资源在本地存在后，返回本地 source 字符串。
• resolve - 返回本地 source 以及缓存元数据。
• 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" 在 native fetch 运行期间，随后会收到本地 source 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 基础 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 用于通用的本地文件访问。