Utilisez @capgo/capacitor-asset-cache

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

Installer

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

Ce plugin expose

bind - Attachez un élément d'image ou de vidéo à une source d'actif local et mettez à jour lorsque prêt.
src - Renvoyez une chaîne de source locale après l'existence de l'actif localement.
resolve - Renvoie la source locale plus les métadonnées de cache.
configure - Définit le comportement par défaut de la CDN et de la révalidation.
get, list, remove, clear, et getCacheSize - Gère 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 passe à 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 lorsqu'il charge 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 CDN

Fournissez 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 demande 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 jetables, mais l'annulation, la suppression des données de l'application, clear()et remove() suppriment toujours les fichiers.

Référence complète

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

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

Si vous utilisez Utilisez @capgo/capacitor-asset-cache pour planifier le chargement de médias persistants, connectez-l’avec @capgo/capacitor-asset-cache pour les détails d'implémentation, Prise en main pour les détails d'implémentation, @capgo/capacitor-downloader pour les téléchargements de fond explicites, et @capgo/capacitor-file pour l'accès général aux fichiers locaux.

Cache d'actifs

Tutoriel sur la mise en cache d'actifs