Cache d'actifs plugin Capacitor

Utilisation de @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache stocke de grandes images et vidéos CDN dans un stockage persistant appartenant à 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 quoi

• bind - Attachez un élément d'image ou vidéo à une source d'actif local et mettez-à-jour lorsque prêt.
• src - Retournez une chaîne de source locale après l'existence de l'actif localement.
• resolve - Retournez la source locale plus les métadonnées de cache.
• configure - Définissez le comportement par défaut de CDN et de revalidation.
• get, list, remove, clear, et getCacheSize - Gérez le cache explicitement lorsque nécessaire.

- Utilisation de l'exemple

Configurez un 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');
}

La mise en page reçoit data-asset-cache-state="loading" tandis 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 lorsqu'il télécharge ou revalide le fichier distant. L'élément web reçoit toujours 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 CDN de base

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 appelle 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 des fichiers internes de l'application. Le système ne traite pas ces fichiers comme des fichiers de cache non essentiels, mais la désinstallation, 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/cache-d'actifs/

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

Si vous utilisez Utilisation de @capgo/capacitor-asset-cache pour planifier le chargement de médias persistants, connectez-l’avec @capgo/capacitor-cache d'actifs pour plus de détails sur l'implémentation, Prise en main pour plus de détails sur l'implémentation, @capgo/capacitor-téléchargeur pour des téléchargements de fond explicites, et @capgo/capacitor-fichier pour l'accès local aux fichiers.