Cache degli Asset plugin Capacitor

Utilizzo di @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache memorizza immagini e video pesanti della CDN nello storage persistente dell'app, restituendo URL di origine locali per le webview di Capacitor.

Installazione

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

Cosa espone il plugin

• bind - Collega un elemento immagine o video a una sorgente asset locale e aggiornalo quando pronto.
• src - Restituisce una stringa della sorgente locale una volta che l'asset è presente localmente.
• resolve - Restituisce la sorgente locale insieme ai metadati della cache.
• configure - Imposta il CDN predefinito e il comportamento di revalidation.
• get, list, remove, clear, e getCacheSize - Gestisci la cache esplicitamente quando necessario.

Esempio di utilizzo

Configura un CDN una sola volta, poi associa gli elementi tramite percorso relativo:

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');
}

L'elemento riceve data-asset-cache-state="loading" mentre il fetch nativo è in esecuzione, poi riceve l'URL della sorgente locale e passa a ready.

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

Asset Protetti

Il plugin invia gli header durante il fetch o la rivalidazione del file remoto. L'elemento web riceve comunque solo l'URL della sorgente locale.

const src = await AssetCache.src('private/videos/intro.mp4', {
  cdnUrl: 'https://cdn.example.com/assets/',
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Senza un CDN Base URL

Passa un URL assoluto se non vuoi configurare cdnUrl.

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

I percorsi relativi richiedono un cdnUrl o per singola chiamata cdnUrl.

Note sullo storage

Su iOS i file si trovano in Application Support e sono esclusi dal backup iCloud. Su Android i file si trovano nella directory interna dell'app. Il sistema non li tratta come file di cache temporanei, ma la disinstallazione, la cancellazione dei dati dell'app, clear(), e remove() li eliminano comunque.

Riferimento completo

• GitHub: https://github.com/Cap-go/capacitor-asset-cache/
• Docs: /docs/plugins/asset-cache/

Continua da Usare @capgo/capacitor-asset-cache

Se stai usando Utilizzo di @capgo/capacitor-asset-cache per pianificare il caricamento persistente dei media, collegalo a @capgo/capacitor-asset-cache per i dettagli sull'implementazione, Guida rapida per i dettagli sull'implementazione, @capgo/capacitor-downloader per download espliciti in background, e @capgo/capacitor-file per l'accesso generico ai file locali.