指南
如何在Capacitor中使用Asset Cache
使用@capgo/capacitor-asset-cache
@capgo/capacitor-asset-cache 存储大型CDN图像和视频在应用所有者持久存储中，然后返回Capacitor webviews的本地源URL。
安装
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');
}
- 当原生fetch运行时，接收本地源URL并移动到 data-asset-cache-state="loading" - 受保护的资产 ready.
img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
opacity: 0.45;
}
- 头文件由插件在fetch或重新验证远程文件时发送。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 上，文件位于应用支持文件夹中，并且不被 iCloud 备份。 在 Android 上，文件位于应用内部文件夹中。系统不会将这些文件视为可丢弃的缓存文件，但卸载、清除应用数据、 clear()仍然会删除它们。 remove() 完整参考
__CAPGO_KEEP_0__:
- GitHub: https://github.com/Cap-go/capacitor-asset-cache/
- __CAPGO_KEEP_0__
继续使用 @capgo/capacitor-asset-cache
如果您正在使用 使用 @capgo/capacitor-asset-cache 来规划持久的媒体加载，连接它与 @capgo/capacitor-asset-cache 查看实现细节 开始使用 查看实现细节 @capgo/capacitor-下载器 进行明确的后台下载，并 @capgo/capacitor文件 进行一般的本地文件访问