Using @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" 자연스럽게 native 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이 없는 경우

CDN Base URL을 설정하지 않으려면 절대 URL을 전달하세요. cdnUrl.

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

Relative paths는 __CAPGO_KEEP_0__이 구성되거나 cdnUrl 또는 __CAPGO_KEEP_0__이 호출될 때 cdnUrl.

Storage Notes

iOS에서 파일은 Application Support 아래에 저장되고 iCloud 백업에서 제외됩니다. Android에서 파일은 앱 내부 파일 디렉토리 아래에 저장됩니다. 시스템은 이러한 파일을 임시 캐시 파일로 취급하지 않으며, 앱을 삭제하거나 앱 데이터를 지우더라도 여전히 삭제됩니다. clear(), remove() Full Reference

__CAPGO_KEEP_0__:

https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-asset-cache/ https://github.com/Cap-go/capacitor-asset-cache/
Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-asset-cache

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

__CAPGO_KEEP_0__ Using @capgo/capacitor-asset-cache 영구 미디어 로딩을 계획하고 @capgo/capacitor-asset-cache implementation details Getting Started implementation details @capgo/capacitor-downloader explicit background downloads, and @capgo/capacitor-file general local file access.

캐시 어셋

Asset Cache에 대한 튜토리얼