Cache des assets Plugin Capacitor

Utiliser @capgo/capacitor-asset-cache

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

Installer

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

Ce que ce plugin expose

• bind - Liez un élément image ou vidéo à une source d'asset locale et mettez-l’à jour une fois prêt.
• src - Renvoie une chaîne de caractères source locale une fois que l'asset existe localement.
• resolve - Retourne la source locale ainsi que les métadonnées du cache.
• configure - Définissez le CDN par défaut et le comportement de revalidation.
• get, list, remove, clear, et getCacheSize - Gérez explicitement le cache lorsque cela est 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 l'exécution du fetch natif, 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 lors de la récupération ou de la revalidation du 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 configuration cdnUrl soit un paramètre par appel cdnUrl.

Notes sur le stockage

Sur iOS, les fichiers se trouvent dans Application Support et sont exclus de la sauvegarde iCloud. Sur Android, ils se trouvent dans le répertoire de fichiers interne de l'app. Le système ne les traite pas comme des fichiers de cache jetables, mais la désinstallation, l'effacement des données de l'app clear(), et remove() les suppriment quand même.

Référence complète

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

Continuer après l'utilisation de @capgo/capacitor-asset-cache

Si vous utilisez Utiliser @capgo/capacitor-asset-cache pour planifier le chargement persistant de médias, connectez-l’à @capgo/capacitor-asset-cache pour les détails d'implémentation, Premiers pas 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.