시작하기

설치

AI 도움을 받는 설치를 사용하여 플러그인을 설치할 수 있습니다. 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,
  },
});

__CAPGO_KEEP_0__ cdnUrl __CAPGO_KEEP_1__ bind, src__CAPGO_KEEP_2__ resolve.

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

__CAPGO_KEEP_4__

bind __CAPGO_KEEP_6__

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_11__

CDN URL이 성공 경로에서 요소로 전달되지 않습니다. 영구 저장소에 자산이 존재하는 후에 로컬 웹뷰 URL을 받습니다.

React

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" />;
}

Vue

<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>

프레임워크 상태 직접 소스

복사 src 이 섹션은 프레임워크가 로딩 및 오류 상태를 제어할 때 사용하세요. promise는 로컬 소스 문자열만을 반환합니다.

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

videoElement.src = src;

사용하세요. 또한 메타데이터가 필요할 때: resolve 클립보드에 복사

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

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

제목이 '보호된 자산'인 섹션

클립보드에 복사

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

재검증

제목이 '재검증'인 섹션

__CAPGO_KEEP_0__ configure __CAPGO_KEEP_0__

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

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__	__CAPGO_KEEP_3__
never	__CAPGO_KEEP_4__
ttl	__CAPGO_KEEP_5__
always	__CAPGO_KEEP_6__
etag	__CAPGO_KEEP_7__
last-modified	__CAPGO_KEEP_8__

__CAPGO_KEEP_9__

• __CAPGO_KEEP_11__
• Android는 앱 내부 파일 디렉토리에서 파일을 저장합니다.
• 웹은 브라우저 캐시 API 및 localStorage 메타데이터를 개발용 FALLBACK으로 사용합니다.
• 캐시된 파일은 앱 샌드박스 내부에 숨겨져 있으며 공공 사용자 미디어에 저장되지 않습니다.
• 캐시된 파일은 설치 취소, 앱 데이터 삭제 또는 플러그인 clear() or remove().

캐시는 지속되지만 보안 경계가 아니므로, 장치가 위협받은 경우 읽을 수 없는 파일로 남겨야 하는 경우에만 highly sensitive assets를 암호화하세요.

고급 캐시 제어

대부분의 UI code는 bind, src, 또는 resolve이 헬퍼를 사용하세요. 캐시 관리에 대한 명시적인 제어가 필요할 때:

메소드	설명
get	원격 URL을 원시 파일 메타데이터로 변환합니다.
list	디스크에 여전히 존재하는 캐시된 자산을 반환합니다.
getCacheSize	캐시된 바이트의 총량을 반환합니다.
remove	키 또는 URL로 하나의 캐시된 자산을 제거합니다.
clear	플러그인으로 관리되는 모든 캐시된 자산을 제거합니다.

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