使用@capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache 将大型CDN图片和视频存储在应用所有的持久存储中，然后返回本地源URL用于Capacitor webviews。

安装

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" 当原生 fetch 运行时，接收到本地源 URL 并移动到 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

当不想配置 CDN 时，传入一个绝对 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 进行一般的本地文件访问。

Asset Cache

关于Asset Cache的教程