Caché de assets plugin Capacitor

Usando @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache Guarda imágenes y videos grandes de CDN en almacenamiento persistente de la app y devuelve URLs de origen local para los webviews de Capacitor.

Instalar

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

Lo que expone este plugin

• bind - Vincula un elemento de imagen o video a una fuente de asset local y actualízalo cuando esté listo.
• src - Devuelve una cadena de origen local una vez que el asset existe localmente.
• resolve - Devuelve la fuente local junto con los metadatos de caché.
• configure - Set default CDN and revalidation behavior.
• get, list, remove, clear, y getCacheSize - Gestiona la caché de forma explícita cuando sea necesario.

Ejemplo de uso

Configura un CDN una vez y luego vincula elementos mediante rutas relativas:

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');
}

El elemento obtiene data-asset-cache-state="loading" mientras se ejecuta el fetch nativo, luego recibe la URL de la fuente local y pasa a ready.

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

Assets protegidos

El plugin envía los headers mientras obtiene o revalida el archivo remoto. El elemento web sigue recibiendo solo la URL de la fuente local.

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

Sin una URL base de CDN

Pasa una URL absoluta si no quieres configurar cdnUrl.

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

Las rutas relativas requieren una URL base configurada cdnUrl o una por llamada cdnUrl.

Notas de almacenamiento

En iOS, los archivos se guardan en Application Support y se excluyen del backup de iCloud. En Android, se guardan en el directorio de archivos internos de la app. El sistema no los trata como archivos de caché desechables, pero desinstalar o borrar los datos de la app clear(), y remove() sigue eliminándolos.

Referencia completa

• GitHub: https://github.com/Cap-go/capacitor-asset-cache/
• Docs: /docs/plugins/asset-cache/

Continúa desde Usando @capgo/capacitor-asset-cache

Si estás usando Usando @capgo/capacitor-asset-cache para planificar la carga de medios persistentes, conéctalo con @capgo/capacitor-asset-cache para detalles de implementación, Primeros pasos para detalles de implementación, @capgo/capacitor-downloader para descargas en segundo plano explícitas, y @capgo/capacitor-file para el acceso general a archivos locales.