Guía
Cómo usar Cache de Activos en Capacitor
Usando @capgo/capacitor-cache-de-activos
@capgo/capacitor-asset-cache almacena imágenes y videos de CDN grandes en almacenamiento persistente de la aplicación, y devuelve URLs de origen locales para Capacitor webviews.
Instalar
npm install @capgo/capacitor-asset-cache
npx cap sync
¿Qué expone este plugin?
bind- Asocie un elemento de imagen o video a una fuente de activo local y actualice cuando esté listo.src- Devuelve una cadena de fuente local después de que el activo exista localmente.resolve- Devuelve la fuente local más metadatos de caché.configure- Establezca el comportamiento de CDN y revalidación por defecto.get,list,remove,clear, andgetCacheSize- Administre el caché explícitamente cuando sea necesario.
Uso de Ejemplo
Configura una CDN una vez, luego vincula elementos por ruta relativa:
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 la solicitud nativa se ejecuta, luego recibe la URL de origen local y se mueve a ready.
img[data-asset-cache-state='loading'],
video[data-asset-cache-state='loading'] {
opacity: 0.45;
}
Activos Protegidos
Los encabezados son enviados por el plugin mientras se carga o revalida el archivo remoto. El elemento web sigue recibiendo solo la URL de origen local.
const src = await AssetCache.src('private/videos/intro.mp4', {
cdnUrl: 'https://cdn.example.com/assets/',
headers: {
Authorization: `Bearer ${token}`,
},
});
Sin URL base de CDN
Proporciona una URL absoluta cuando no desees configurar cdnUrl.
const src = await AssetCache.src('https://cdn.example.com/assets/videos/intro.mp4');
Las rutas relativas requieren o una configuración cdnUrl o una llamada cdnUrl.
Nota de almacenamiento
En iOS, los archivos viven bajo Aplicación de soporte y se excluyen del respaldo de iCloud. En Android, los archivos viven en el directorio de archivos internos de la aplicación. El sistema no trata estos archivos como archivos de caché no desechables, pero desinstalar, eliminar datos de la aplicación, clear()y remove() los elimina todavía.
Referencia completa
- GitHub: https://github.com/Cap-go/capacitor-cache-de-activos/
- Documentación: /docs/plugins/asset-cache/
Continuar desde el uso de @capgo/capacitor-asset-cache
Si estás utilizando Usando @capgo/capacitor-asset-cache Para planificar la carga persistente de medios, conectarlo con @capgo/capacitor-asset-cache para detalles de implementación Getting Started para detalles de implementación @capgo/capacitor-descargador para descargas de fondo explícitas, y @capgo/capacitor-archivo para acceso a archivos locales en general.