使用@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

传入一个绝对 URL 时，不想配置 cdnUrl.

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

相对路径需要配置一个 cdnUrl 或一个 cdnUrl.

存储说明

在 iOS 上，文件存储在 Application Support 下，并且排除了 iCloud备份。在 Android 上，文件存储在应用程序内部文件目录下。系统不会将这些文件视为可丢弃的缓存文件，但卸载、清除应用程序数据等操作仍会删除它们。 clear(), remove() 完整参考

__CAPGO_KEEP_0__:

https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-asset-cache/ https://github.com/Cap-go/capacitor-asset-cache/
继续使用 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-asset-cache

Keep going from Using @capgo/capacitor-asset-cache

__CAPGO_KEEP_0__ 使用@capgo/capacitor-asset-cache 来规划持久的媒体加载，连接它 @capgo/capacitor-asset-cache 查看实现细节开始查看实现细节 @capgo/capacitor-downloader 用于显式背景下载，并 @capgo/capacitor-file 用于一般本地文件访问。

Asset Cache

Asset Cache教程