Zum Hauptinhalt springen
@capgo/capacitor-asset-cache Daten und Speicher Offene Quelle

Asset Cache Capacitor-Plugin

Cache CDN-Bilder und -Videos in der persistenten App-Speicherung und binden sie als lokale Mediendateien

Installieren

bun add @capgo/capacitor-asset-cache bunx cap sync
npm, pnpm oder yarn
  • npm install @capgo/capacitor-asset-cache
  • pnpm add @capgo/capacitor-asset-cache
  • yarn add @capgo/capacitor-asset-cache

Richtlinie

Wie man Asset Cache in Capacitor verwendet

Verwendung von @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache speichert große CDN-Bilder und -Videos in der app-eigenen persistenten Speicherung 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 - Ein Bild- oder Videoelement an eine lokale Assetquelle anhängen und aktualisieren, wenn bereit ist.
  • src - Eine lokale Quellzeichenkette zurückgeben, nachdem das Asset lokal existiert.
  • resolve - Die lokale Quellzeichenkette plus Cache-Metadaten zurückgeben.
  • configure - Standard-CDN und Revalidierungsverhalten festlegen.
  • get, list, remove, clear- , und getCacheSize - Die Cache-Einstellungen explizit verwalten, wenn nötig.

- Beispielsweise Verwendung

- Eine CDN einmal konfigurieren, dann Elemente durch relative Pfad 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 die native Fetch-Laufzeit läuft, dann erhält es die lokale Quell-URL und wechselt zu ready.

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

- Schutzassets

Die Header werden vom Plugin gesendet, während es das Remote-File abruft oder revalidiert. Das Web-Element erhält jedoch nur die lokale Quell-URL.

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

Ohne CDN-Base-URL

Einen absoluten URL übergeben, wenn keine Konfiguration gewünscht ist. 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() sind immer noch gelöscht.

Vollständige Referenz

Fortsetzen von @capgo/capacitor-asset-cache

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-asset-cache verwenden Verwenden Sie @capgo/capacitor-asset-cache Um persistente Medienladung zu planen, verbinden Sie es mit @capgo/capacitor-Asset-Cache für weitere Implementierungsdetails Anleitung zum Starten für weitere Implementierungsdetails @capgo/capacitor-downloader für explizite Hintergrunddownloads und @capgo/capacitor-Datei für allgemeinen Zugriff auf lokale Dateien.

FAQ

Asset Cache Plugin FAQ

Wie installiere ich den Asset Cache Plugin in einer Capacitor App?

Führen Sie &quot;bun add @capgo/capacitor-asset-cache&quot; (oder &quot;npm install @capgo/capacitor-asset-cache&quot;), dann führen Sie &quot;bunx cap sync&quot; aus, damit die iOS- und Android-Projekte die native code aufnehmen. Importieren Sie es aus &quot;@capgo/capacitor-asset-cache&quot; in Ihrer code-App.

Funktioniert @capgo/capacitor-asset-cache mit React, Vue und Angular?

Ja. Asset Cache ist ein Capacitor-Paket, daher funktioniert es mit jedem Webframework, das innerhalb von Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und plain JavaScript.

Welche Capacitor Version unterstützt @capgo/capacitor-asset-cache?

Capgo-Plugins folgen der Capacitor-Version: verwenden Sie die Plugin-Majorversion, die Ihrer Capacitor-Majorversion entspricht (z.B. Plugin v8 mit Capacitor 8). Die Kompatibilitäts-Tabelle im GitHub-README enthält die unterstützten Versionen.

Ist @capgo/capacitor-asset-cache kostenlos und Open Source?

Ja. Die Quellcode von code ist öffentlich auf GitHub unter https://github.com/Cap-go/capacitor-asset-cache/ verfügbar und das Paket kann kostenlos installiert werden von npm. Bug-Reports und Pull-Requests sind willkommen.

Kann ich code aktualisieren, das Asset Cache verwendet, ohne eine App-Store-Bewertung?

Die Installation oder Aktualisierung des Plugins ändert die native code, daher benötigt es eine neue Store-Build. Anschließend können JavaScript-, HTML- und CSS-Änderungen, die den Plugin aufrufen, sofort mit Capgo-Live-Updates verschickt werden.

Schiffe Änderungen des Asset-Caches ohne auf eine App-Überprüfung warten

Einmal der Plugin in Ihrem Store-Build ist, Capgo Live-Updates drücken Ihre JavaScript-, HTML- und CSS-Änderungen an die Benutzer in Minuten.

Starten Sie mit Capgo