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 local para Capacitor webviews.

Instalar

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

Qué este plugin expone

bind - Asocie un elemento de imagen o video a una fuente de activo local y actualízalo cuando esté disponible.
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 - 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 una 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 la solicitud nativa se ejecuta, 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;
}

Activos Protegidos

Los encabezados se envían por el plugin mientras se carga o revalida el archivo remoto. El elemento web recibe 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.

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 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() los elimina todavía.

Referencia completa

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

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, Empezar para detalles de implementación, @capgo/capacitor-descargador para descargas de fondo explícitas, y @capgo/capacitor-archivo para acceso general a archivos locales.

Cache de Activos

Tutoriales sobre Cache de Activos