전체 참조

__CAPGO_KEEP_11__

Capgo 플러그인을 설치하기 위해 AI-Assisted Setup을 사용할 수 있습니다. AI 도구에 다음 명령어를 사용하여 Capgo 기능을 추가하세요.

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

그다음에 다음 프롬프트를 사용하세요.

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-asset-cache` plugin in my project.

만약 Manual Setup을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하세요.

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

Import

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

CDN을 설정하세요

앱이 시작될 때 CDN의 기본 URL을 한 번 설정하세요. 상대 경로의 자산 경로는 이 URL에 대해 해결됩니다.

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

스킵할 수 있습니다 cdnUrl 절대 URL을 전달하면 bind, src또는 resolve.

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

이미지나 비디오를 바인딩하세요

bind 가장 투명한 표시 경로입니다. 이 경로에서는 엘리먼트를 로딩 상태로 표시하고, 자산을 로드하거나 재검증하고, 로컬 소스 URL을 할당할 때까지 로컬 파일이 준비될 때까지 기다립니다.

const image = document.querySelector<HTMLImageElement>('#hero');

if (image) {
  const binding = AssetCache.bind(image, 'images/hero.jpg');
  await binding.promise;
}

<img id="hero" alt="Product preview" />

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

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

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__

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, 'images/hero.jpg');
    return () => binding.cancel();
  }, []);

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

__CAPGO_KEEP_0__

<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, 'images/hero.jpg', {
      cdnUrl: 'https://cdn.example.com/assets/',
    });
  }
});

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

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

__CAPGO_KEEP_8__

when your framework already controls loading and error state. The promise resolves with a local source string only after the local file exists. src Copy to clipboard

const src = await AssetCache.src('videos/intro.mp4');

videoElement.src = src;

Copy to clipboard resolve Protected Assets Section

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

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

Copy to clipboard

__CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__ configure __CAPGO_KEEP_3__

await AssetCache.src('videos/intro.mp4', {
  revalidate: {
    strategy: 'etag',
  },
});

__CAPGO_KEEP_5__

__CAPGO_KEEP_6__	__CAPGO_KEEP_7__
never	__CAPGO_KEEP_8__
ttl	__CAPGO_KEEP_9__
always	__CAPGO_KEEP_10__
etag	__CAPGO_KEEP_11__
last-modified	__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

• __CAPGO_KEEP_3__
• __CAPGO_KEEP_4__
• Web uses the browser Cache API and localStorage metadata as a development fallback.
• __CAPGO_KEEP_6__
• __CAPGO_KEEP_7__ clear() __CAPGO_KEEP_8__ remove().

__CAPGO_KEEP_9__

__CAPGO_KEEP_10__

대부분의 UI code는 bind, src, 또는 resolve. 캐시 관리를 명시적으로 필요로 할 때 사용하세요:

메서드	설명
get	remote URL을 native file metadata로 변환합니다.
list	disk에 아직 존재하는 캐시된 자산을 반환합니다.
getCacheSize	캐시된 바이트의 총량을 반환합니다.
remove	key 또는 URL로 하나의 캐시된 자산을 삭제합니다.
clear	plugin이 관리하는 모든 캐시된 자산을 삭제합니다.

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

전체 참조

• GitHub https://github.com/Cap-go/capacitor-asset-cache/
• 패키지: @capgo/capacitor-asset-cache