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- , undgetCacheSize- 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
- GitHub: https://github.com/Cap-go/capacitor-Asset-Cache/
- Dokumentation: /docs/plugins/asset-cache/
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.