Cache des assets Plugin Capacitor

Utiliser @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache stocke les images et vidéos CDN volumineuses dans le stockage persistant propre à l'app, puis renvoie des URL sources locales pour les webviews Capacitor.

Installer

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

Ce que ce plugin expose

• bind - Associer un élément image ou vidéo à une source locale d’asset et le mettre à jour lorsqu’il est prêt.
• src - Renvoyer une chaîne de source locale une fois que l’asset existe localement.
• resolve - Renvoyer la source locale ainsi que les métadonnées du cache.
• configure - Définir le CDN par défaut et le comportement de revalidation.
• get, list, remove, clear, et getCacheSize - Gérer le cache explicitement si nécessaire.

Exemple d'utilisation

Configurez un CDN une seule 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 reçoit data-asset-cache-state="loading" pendant que le fetch natif 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;
}

Assets protégés

Le plugin envoie les headers lorsqu'il récupère ou revalide le fichier distant. L'élément web ne reçoit toujours que 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

Passez une URL absolue si 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 valeur configurée cdnUrl soit une valeur par appel cdnUrl.

Notes sur le stockage

Sur iOS, les fichiers sont stockés dans Application Support et exclus de la sauvegarde iCloud. Sur Android, ils se trouvent dans le répertoire interne de l'application. Le système ne les considère pas comme du cache jetable, mais une désinstallation ou un effacement des données de l'app clear(), et remove() les supprimera quand même.

Référence complète

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

Continuer depuis « Utilisation de @capgo/capacitor-asset-cache »

Si vous utilisez Utiliser @capgo/capacitor-asset-cache pour planifier le chargement de médias persistants, connectez-l’à @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 explicites en arrière-plan, et @capgo/capacitor-file pour l'accès général aux fichiers locaux.