Saltar al contenido principal
@capgo/capacitor-caché-de-activos Archivos y almacenamiento Fuente abierta

Caché de activos plugin de Capacitor

Cache imágenes y videos de CDN en almacenamiento de aplicación persistente y vincúlalos como fuentes de medios locales

Instalar

bun add @capgo/capacitor-asset-cache bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-asset-cache
  • pnpm add @capgo/capacitor-asset-cache
  • yarn add @capgo/capacitor-asset-cache

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, and getCacheSize - 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

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.

FAQ

Preguntas frecuentes del plugin de caché de activos

¿Cómo instalo el plugin de caché de activos en una aplicación Capacitor?

Ejecuta &quot;bun add @capgo/capacitor-asset-cache&quot; (o &quot;npm install @capgo/capacitor-asset-cache&quot;), luego ejecuta &quot;bunx cap sync&quot; para que los proyectos iOS y Android capturen los nativos code. Importa desde &quot;@capgo/capacitor-asset-cache&quot; en tu aplicación code.

¿Funciona @capgo/capacitor-asset-cache con React, Vue y Angular?

Sí. El caché de activos es un paquete Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor soporta @capgo/capacitor-asset-cache?

Capgo plugins siguen la versión mayor de Capacitor: utiliza la versión mayor del plugin que coincida con la versión mayor de Capacitor (por ejemplo, plugin v8 con Capacitor 8). La tabla de compatibilidad en el README del GitHub lista las versiones mantenidas.

¿Es gratuito y de código abierto @capgo/capacitor-asset-cache?

Sí. El código fuente de code está disponible en GitHub en https://github.com/Cap-go/capacitor-asset-cache/ y el paquete es gratuito para instalar desde npm. Se aceptan informes de errores y solicitudes de cambios.

¿Puedo actualizar code que utiliza el caché de activos sin una revisión de la Tienda?

Instalar o actualizar el plugin cambia los nativos code, por lo que necesita una nueva construcción de la tienda. Después de eso, los cambios de JavaScript, HTML y CSS que llaman al plugin pueden enviar instantáneamente con Capgo actualizaciones en vivo.

Envía cambios en la caché de activos sin esperar a la revisión de la aplicación

Una vez que el plugin esté en tu tienda de construcción, Capgo actualizaciones en vivo envían los cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Comienza con Capgo