Usando @capgo/capacitor-caché-de-activos

@capgo/capacitor-asset-cache almacena imágenes y videos de CDN grandes en almacenamiento persistente de la aplicación, luego devuelve URLs de origen local para Capacitor webviews.

Instalar

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

¿Qué esta plugin expone?

bind - Asignar un elemento de imagen o video a una fuente de activo local y actualizarlo cuando esté listo.
src - Devolver una cadena de origen local después de que el activo exista localmente.
resolve - Devuelve la fuente local más metadatos de caché.
configure - Establece el comportamiento de revalidación y CDN por defecto.
get, list, remove, clear, y getCacheSize - Administra la caché explícitamente cuando sea necesario.

Ejemplo de uso

Configure un CDN una vez, luego vincule 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 se ejecuta la solicitud nativa, luego recibe la URL de la fuente local y se mueve a ready.

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

Recursos Protegidos

Los encabezados se envían por el plugin mientras se carga 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 cuando no quieras configurar cdnUrl.

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

Rutas relativas requieren o un configurado cdnUrl o un por llamada cdnUrl.

Notas de almacenamiento

En iOS, los archivos viven bajo Aplicación de soporte y se excluyen del respaldo de iCloud. En Android, los archivos viven bajo 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() aún así, los elimina.

Referencia completa

GitHub: https://github.com/Cap-go/capacitor-cache-de-activos/
Documentación: /docs/plugins/cache-de-activos/

Sigue adelante desde Usando @capgo/capacitor-cache-de-activos

Si estás utilizando Usando @capgo/capacitor-cache de activos para planificar la carga de medios persistente, conecte con @capgo/capacitor-cache de activos para detalles de implementación, Inicio 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.

Cache de Activos

Tutorial sobre caché de activos