Saltar al contenido principal
Capgo logo
Volver a plugins

Guía

Tutoriales sobre Cache de Activos

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é expone este plugin

  • 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 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 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 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;
}

Activos 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.

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 eliminan todavía.

Referencia completa

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 general a archivos locales.