指南
如何在 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- 将图片或视频元素绑定到本地资源 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;
}
受保护资源
插件在获取或重新验证远程文件时会发送 Header。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 用于通用的本地文件访问。