En utilisant @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache stocke de grandes images et vidéos CDN dans un stockage persistant appartenant à l'application, puis retourne des URL de source locales pour les vues web Capacitor.

Installer

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

Ce plugin expose

bind - Attacher un élément d'image ou de vidéo à une source d'actif local et le mettre à jour lorsque prêt.
src - Retourner une chaîne de source locale après l'existence de l'actif local.
resolve - Récupérer la source locale plus les métadonnées de cache.
configure - Définir le comportement par défaut de la CDN et de la révalidation.
get, list, remove, clear, et getCacheSize - Gérer le cache explicitement lorsque cela est nécessaire.

Exemple d'utilisation

Configurez une CDN une fois, puis liez les éléments par chemin relatif :

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'élément obtient data-asset-cache-state="loading" pendant que la requête native s'exécute, puis reçoit l'URL de la source locale et se déplace vers ready.

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

Actifs Protégés

Les en-têtes sont envoyés par le plugin pendant qu'il récupère ou révalide le fichier distant. L'élément web reçoit uniquement l'URL de la source locale.

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

Sans URL de base de CDN

Passer une URL absolue lorsque vous ne souhaitez pas configurer cdnUrl.

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

Les chemins relatifs nécessitent soit une configuration cdnUrl soit une configuration par appel cdnUrl.

Notes de stockage

Sur iOS, les fichiers vivent sous Application Support et sont exclus de la sauvegarde iCloud. Sur Android, les fichiers vivent sous le répertoire de fichiers internes de l'application. Le système ne traite pas ces fichiers comme des fichiers de cache disposables, mais l'annulation, la suppression des données de l'application, clear()et remove() supprimer toujours

Référence complète

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

Continuez à partir de l'utilisation de @capgo/capacitor-cache-asset

Si vous utilisez Utilisez @capgo/capacitor-cache-asset pour planifier le chargement de médias persistants, connectez-le avec @capgo/capacitor-cache-asset pour les détails d'implémentation, Démarrage pour les détails d'implémentation, @capgo/capacitor-téléchargeur pour les téléchargements de fond d'explication, et @capgo/capacitor-fichier pour l'accès général aux fichiers locaux.

Cache d'actifs

Tutoriel sur la cache d'actifs