Zum Hauptinhalt springen
Zurück zu Plugins
@capgo/capacitor-Asset-Cache
Tutorial
@capgo/capacitor-Asset-Cache

Asset Cache

Cachiere CDN-Bilder und -Videos in der persistenten App-Speicherung und binden sie als lokale Medienquellen

Ansehen auf __CAPGO_KEEP_0__

Richtlinie

Using @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache Verwenden Sie @Capacitor/__CAPGO_KEEP_1__-asset-cache

Installieren

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

Was dieses Plugin bereitstellt

  • bind - Ein Bild- oder Videoelement an eine lokale Assetquelle anhängen und es aktualisieren, wenn es bereit ist.
  • src - Eine lokale Quellzeichenkette zurückgeben, nachdem das Asset lokal existiert.
  • resolve - Die lokale Quelle plus Cache-Metadaten zurückgeben.
  • configure - Die Standard-CDN- und Wiederherstellungsverhalten festlegen.
  • get, list, remove, clear, und getCacheSize - Die Cache-Einstellungen explizit verwalten, wenn nötig.

Beispielverwendung

Konfigurieren Sie eine CDN einmal, dann binden Sie Elemente über relative Pfade:

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 die native Fetch-Anfrage läuft, dann erhält es die lokale Quelle-URL und wechselt zu ready.

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

Geschützte Assets

Kopfzeilen werden vom Plugin gesendet, während es die remote Datei abruft oder wiederherstellt. Das Web-Element erhält nur die lokale Quelle-URL.

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

Ohne CDN- Basis-URL

Geben Sie eine absolute URL an, wenn Sie nicht möchten, dass eine CDN konfiguriert wird. 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 cdnUrl.

Speichernachrichten

Bei iOS leben Dateien unter Application Support und werden von iCloud-Backup ausgeschlossen. Bei Android leben Dateien unter dem internen Dateiverzeichnis der App. Das System behandelt diese Dateien nicht als verwerfliche Cache-Dateien, sondern löscht sie bei Uninstall, App-Daten löschen, clear(), und remove() noch immer löschen sie.

Vollständige Referenz

Fortsetzen Sie mit der Verwendung von @capgo/capacitor-asset-cache

Wenn Sie die Nutzung von Mit @capgo/capacitor-Asset-Cache um persistente Medienbeladung zu planen, verbinden Sie es mit @capgo/capacitor-Asset-Cache zur Implementierungsdetails Anleitung zum Starten zur Implementierungsdetails @capgo/capacitor-Downloader zur expliziten Hintergrundherunterladen, und @capgo/capacitor-File zur allgemeinen lokalen Datei-Zugriff.