@ capgo/ 电容- 资产- cache

缓存设备上的大型图像,视频和其他CDN文件,以便立即加载并下线工作. 一个呼叫将远程 URL 变成您 WebView 可以显示的本地文件 .

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-asset-cache 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 添加@capgo/电容-asset-cache到我的电容软件上 代理设置指南 • 妇女 主机磁共振

主要特点

• 本地文件数字 : get() 下载一次资产并返回持久本地文件.
• 显示就绪数字 : resolve() 财务报告和审定财务报表 src() 将 CDN 路径或 URL 转换为您可以设置的值 src。 。 。 .
• 调整数字 : never, (中文(简体) ), ttl (与 maxAgeSeconds, (中文(简体) ), always, (中文(简体) ), etag 或者说 last-modified 策略,加上自定义请求头.
• 缓存管理数字 : list(), (中文(简体) ), getCacheSize(), (中文(简体) ), remove() 财务报告和审定财务报表 clear()。 。 。 .
• 平台: iOS,Android和Web. 互联网档案馆的存檔,存档日期2013-12-02. 网页执行在浏览器中保留了相同的API.

为什么是资产缓存?

@capgo/capacitor-asset-cache 让应用程序代码请求媒体源并直接绑定到一个 <img>, (中文(简体) ), <video>,反应组件,Vue模板,或任何其他网络UI.

• 通过一个 CDN 路径像 videos/intro.mp4 并获取本地显示准备的 URL .
• 使用持续应用存储:iOS应用程序支持和Android内部文件.
• src(...) 财务报告和审定财务报表 resolve(...) 只在本地文件存在后解析;如果插件不能创建本地文件,则呼叫拒绝.
• bind(...) 更新图像或视频元素 loading 改为 ready 当本地文件可用时.
• 支持缓存唯一, TTL, ETag, 最后修改, 并且总是重新验证模式 .
• 保持较低级别 get, (中文(简体) ), list, (中文(简体) ), remove,以及 clear 高级缓存管理助手.

缓存在应用程序未安装时被去除,但系统在压力下可能冲走的缓存目录中并不存储.

文档

这里有最完整的医生: https://capgo.app/docs/plugins/asset-cache/ 页面存档备份,存于互联网档案馆

兼容性

安装

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

使用量

配置CDN一次,然后将媒体元素绑定在CDN路径上. 元素只接收本地抓取完成后的本地网页视图 URL .

import { AssetCache } from '@capgo/capacitor-asset-cache';

AssetCache.configure({
  cdnUrl: 'https://cdn.example.com/assets/',
  revalidate: {
    strategy: 'ttl',
    maxAgeSeconds: 86400,
  },
});

const video = document.querySelector('video');
if (video) {
  AssetCache.bind(video, 'videos/intro.mp4');
}

video[data-asset-cache-state='loading'],
img[data-asset-cache-state='loading'] {
  opacity: 0.4;
}

video[data-asset-cache-state='ready'],
img[data-asset-cache-state='ready'] {
  opacity: 1;
}

反应

import { useEffect, useRef } from 'react';
import { AssetCache } from '@capgo/capacitor-asset-cache';

AssetCache.configure({ cdnUrl: 'https://cdn.example.com/assets/' });

export function HeroImage() {
  const imageRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (!imageRef.current) return;

    const binding = AssetCache.bind(imageRef.current, 'hero.jpg');
    return () => binding.cancel();
  }, []);

  return <img ref={imageRef} alt="" />;
}

阴道

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { AssetCache, type AssetCacheBinding } from '@capgo/capacitor-asset-cache';

const image = ref<HTMLImageElement | null>(null);
let binding: AssetCacheBinding | undefined;

onMounted(() => {
  if (image.value) {
    binding = AssetCache.bind(image.value, 'hero.jpg', {
      cdnUrl: 'https://cdn.example.com/assets/',
    });
  }
});

onUnmounted(() => binding?.cancel());
</script>

<template>
  <img ref="image" alt="" />
</template>

直接来源

使用 src(...) 当框架已经管理装入状态时。 它只有在本地文件准备好后才解决.

const src = await AssetCache.src('images/hero.jpg');

受保护资产

传头到本地取来。 网络元素只接收插件返回的本地文件 URL.

const src = await AssetCache.src('private/videos/intro.mp4', {
  cdnUrl: 'https://cdn.example.com/assets/',
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

检查决议

使用 resolve(...) 当您想要本地文件分辨率的元数据时.

const source = await AssetCache.resolve('images/hero.jpg');

console.log(source.src, source.fromCache, source.status);

高级缓存控制

使用 get(...) 仅当您需要原始本地文件元数据时直接 .

const asset = await AssetCache.get({
  url: 'https://example.com/videos/intro.mp4',
  key: 'intro.mp4',
  revalidate: { strategy: 'etag' },
});

平台注释

• iOS存储应用程序支持下的文件,并将缓存根从iCloud备份中排除.
• Android在应用程序内部文件目录下存储文件.
• Web使用浏览器Cache API和localStorage元数据作为开发倒计时.

API 密码

• configure(...)
• resolve(...)
• src(...)
• bind(...)
• get(...)
• remove(...)
• clear()
• list()
• getCacheSize()
• getPluginVersion()
• 接口
• 类型异名

用于大型Capacitor图像,视频等媒体的持续资产缓存.

配置(...)

configure(options: AssetCacheConfigOptions) => void

设置未来的默认值 src(...), (中文(简体) ), resolve(...),以及 bind(...) 打电话.

分辨率(...)

resolve(path: AssetCacheSourceInput, options?: AssetCacheSourceOptions | undefined) => Promise<ResolvedAssetSource>

将 CDN 路径或远程 URL 解析为本地显示已准备好的源 URL .

回返情况: Promise<ResolvedAssetSource>

src (...) (中文(简体) )

src(path: AssetCacheSourceInput, options?: AssetCacheSourceOptions | undefined) => Promise<string>

将 CDN 路径或远程 URL 解析为本地字符串 img.src 或者说 video.src。 。 。 .

回返情况: Promise<string>

绑定(...)

bind(element: AssetCacheBindableElement, path: AssetCacheSourceInput, options?: AssetCacheBindOptions | undefined) => AssetCacheBinding

将图像或视频元素绑入本地资产, 并随时更新 .

回返情况: AssetCacheBinding

获取(...)

get(options: GetAssetOptions) => Promise<CachedAsset>

将资产 URL 解析为本地持久文件 .

回返情况: Promise<CachedAsset>

删除(...)

remove(options: AssetCacheKeyOptions) => Promise<RemoveAssetResult>

按密钥或 URL 删除一个缓存资产 .

回返情况: Promise<RemoveAssetResult>

清除( c)

clear() => Promise<ClearCacheResult>

删除此插件管理的所有缓存资产 .

回返情况: Promise<ClearCacheResult>

列表( )

list() => Promise<AssetCacheListResult>

列出磁盘上仍然存在的缓存资产 .

回返情况: Promise<AssetCacheListResult>

获取缓存Size ()

getCacheSize() => Promise<AssetCacheSizeResult>

返回全部缓存资产字节 .

回返情况: Promise<AssetCacheSizeResult>

获取 PluginVersion ()

getPluginVersion() => Promise<PluginVersionResult>

返回平台执行版本标记 .

回返情况: Promise<PluginVersionResult>

接口

资产缓存配置选项

使用的共享默认值 AssetCache.src(...) 财务报告和审定财务报表 AssetCache.resolve(...)。 。 。 .

资产分类修订选项

缓存资产的重现选项.

解析自定义源

返回结果 AssetCache.resolve(...)。 。 。 .

缓存

存储在应用软件持续存储中的缓存资产.

解析自定义源选项

输入 AssetCache.src(...) 财务报告和审定财务报表 AssetCache.resolve(...)。 。 。 .

资产缓存源选项

使用的每个资产选项 AssetCache.src(...) 财务报告和审定财务报表 AssetCache.resolve(...)。 。 。 .

资产缓存窗口

装订返回 AssetCache.bind(...)。 。 。 .

资产缓存选项

使用的选项 AssetCache.bind(...)。 。 。 .

获取设置选项

用于将远程资产解析为本地持久性文件的选项 .

删除

删除结果 .

资产缓存关键选项

通过缓存密钥或 URL 识别资产 . key 二者皆为胜.

清除缓存结果

明确结果.

资产控制列表

列表结果.

资产缓存

缓存大小结果 .

插件变压器

插件版本有效载荷 .

类型异名

资产分类修订战略

当某项资产已经存在于持续存储中时,则使用重新校正模式.

'never' | 'ttl' | 'always' | 'etag' | 'last-modified'

资产缓存来源输入

接受的方便投入 AssetCache.src(...) 财务报告和审定财务报表 AssetCache.resolve(...)。 。 。 .

string | ResolveAssetSourceOptions

资产缓存组合元素

由 AssetCache.bind(...)。 。 。 .

HTMLImageElement | HTMLVideoElement