Caching degli asset Plugin Capacitor

Utilizzo di @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache memorizza immagini e video CDN di grandi dimensioni nel storage persistente dell'applicazione, quindi restituisce URL di origine locale per Capacitor webview.

Installa

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

Cos'è che questo plugin esporre

• bind - Collega un elemento di immagine o video a una fonte di asset locale e aggiornalo quando pronto.
• src - Restituisci una stringa di fonte locale dopo che l'asset esiste localmente.
• resolve - Restituisci la fonte locale più i metadati di cache.
• configure - Imposta il comportamento di default per CDN e riconvalidazione.
• get, list, remove, clear, and getCacheSize - Gestisci la cache esplicitamente quando necessario.

Esempio di utilizzo

Configura una CDN una volta, poi lega gli elementi con 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 ottiene data-asset-cache-state="loading" mentre il fetch nativo esegue la richiesta, riceve poi l'URL della fonte locale e si sposta a ready.

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

Asseti Protetti

I capocchie sono inviate dal plugin mentre si effettua il recupero o la riconvalida del file remoto. L'elemento web riceve comunque solo l'URL della fonte locale.

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

Senza una base URL CDN

Passa un URL assoluto quando non desideri configurare cdnUrl.

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

Le percorso relativi richiedono o una configurazione cdnUrl o una chiamata per cdnUrl.

Note sullo Storage

Sui dispositivi iOS, i file vivono sotto Application Support e sono esclusi dal backup iCloud. Sui dispositivi Android, i file vivono sotto il directory dei file interni dell'app. Il sistema non tratta questi file come file di cache disegnabili, ma l'eliminazione dell'app, la pulizia dei dati dell'app, clear(), e remove() li elimina comunque.

Riferimento Completo

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

Continua da Utilizzo di @capgo/capacitor-asset-cache

Se stai utilizzando Utilizzo di @capgo/capacitor-asset-cache per pianificare il caricamento dei media persistente, connettilo con @capgo/capacitor-asset-cache per i dettagli di implementazione, Getting Started per i dettagli di implementazione, @capgo/capacitor-downloader per scarichi di background espliciti, e @capgo/capacitor-file per l'accesso ai file locali in generale.