Asset-Cache Capacitor Plugin

@capgo/capacitor-asset-cache verwenden

@capgo/capacitor-asset-cache speichert große CDN-Bilder und Videos im persistenten, app-eigenen Speicher und gibt lokale Quell-URLs für Capacitor-Webviews zurück.

Installieren

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

Was dieses Plugin bereitstellt

• bind - Bild- oder Videoelement an eine lokale Asset-Quelle binden und es aktualisieren, sobald es bereit ist.
• src - Einen lokalen Source-String zurückgeben, nachdem das Asset lokal vorhanden ist.
• resolve - Lokale Quelle plus Cache-Metadaten zurückgeben.
• configure - Standard-CDN und Revalidierungsverhalten festlegen.
• get, list, remove, clear, und getCacheSize - Den Cache bei Bedarf explizit verwalten.

Anwendungsbeispiel

CDN einmal konfigurieren, dann Elemente über relative Pfade binden:

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

Das Element erhält data-asset-cache-state="loading" während der native Fetch läuft, erhält dann die lokale Quell-URL und wechselt zu ready.

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

Geschützte Assets

Das Plugin sendet Header, während es die Remote-Datei abruft oder revalidiert. Das Web-Element erhält weiterhin nur die lokale Source-URL.

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

Ohne CDN-Base-URL

Übergib eine absolute URL, wenn du keine Konfiguration vornehmen möchtest cdnUrl.

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

Relative Pfade erfordern entweder eine konfigurierte cdnUrl oder eine pro Aufruf festgelegte cdnUrl.

Hinweise zum Speicher

Unter iOS liegen die Dateien in Application Support und sind vom iCloud-Backup ausgeschlossen. Unter Android liegen sie im internen Dateiverzeichnis der App. Das System behandelt diese Dateien nicht als wegwerfbare Cache-Dateien, aber Deinstallation, Löschen der App-Daten clear(), und remove() löschen sie trotzdem.

Vollständige Referenz

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

Weiter mit @capgo/capacitor-asset-cache

Wenn du es nutzt @capgo/capacitor-asset-cache verwenden um persistentes Laden von Medien zu planen, verbinde es mit @capgo/capacitor-asset-cache für Implementierungsdetails, Erste Schritte für Implementierungsdetails, @capgo/capacitor-downloader für explizite Background-Downloads, und @capgo/capacitor-file für den allgemeinen Zugriff auf lokale Dateien.