가이드
Capacitor에서 Asset Cache 사용법
@capgo/capacitor-asset-cache를 사용하여
@capgo/capacitor-asset-cache 대용량 CDN 이미지와 비디오를 앱 소유의 영구 저장소에 저장한 뒤, Capacitor 웹뷰에 로컬 소스 URL을 반환합니다.
설치
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;
}
보호된 에셋
플러그인은 원격 파일을 가져오거나 재검증할 때 헤더를 전송합니다. 웹 요소는 여전히 로컬 소스 URL만 수신합니다.
const src = await AssetCache.src('private/videos/intro.mp4', {
cdnUrl: 'https://cdn.example.com/assets/',
headers: {
Authorization: `Bearer ${token}`,
},
});
CDN Base URL을 사용하지 않는 경우
설정하지 않으려면 절대 URL을 전달하세요 cdnUrl.
const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');
상대 경로를 사용하려면 설정된 CDN Base URL 또는 cdnUrl 호출별 URL이 필요합니다. 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 일반적인 로컬 파일 접근을 위해 사용합니다.