Cache Aset plugin Capacitor

Menggunakan @capgo/capacitor-asset-cache

@capgo/capacitor-asset-cache menyimpan gambar dan video CDN berukuran besar di penyimpanan persisten milik aplikasi, lalu mengembalikan URL sumber lokal untuk webview Capacitor.

Instal

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

Apa yang Diekspos Plugin Ini

• bind - Hubungkan elemen gambar atau video ke sumber aset lokal dan perbarui saat siap.
• src - Mengembalikan string sumber lokal setelah aset tersedia secara lokal.
• resolve - Mengembalikan sumber lokal beserta metadata cache.
• configure - Atur default CDN dan perilaku revalidasi.
• get, list, remove, clear, dan getCacheSize - Kelola cache secara eksplisit saat dibutuhkan.

Contoh Penggunaan

Konfigurasi CDN sekali, lalu hubungkan elemen menggunakan path 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');
}

Elemen akan mendapatkan data-asset-cache-state="loading" saat native fetch berjalan, lalu menerima URL sumber lokal dan beralih ke ready.

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

Aset Terproteksi

Plugin mengirimkan header saat mengambil atau melakukan revalidasi file jarak jauh. Elemen web tetap hanya menerima URL sumber lokal.

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

Tanpa CDN Base URL

Gunakan URL absolut jika Anda tidak ingin melakukan konfigurasi cdnUrl.

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

Path relatif memerlukan konfigurasi cdnUrl atau konfigurasi per panggilan cdnUrl.

Catatan penyimpanan

Di iOS, file berada di Application Support dan dikecualikan dari backup iCloud. Di Android, file berada di direktori file internal aplikasi. Sistem tidak menganggap file ini sebagai cache yang bisa dibuang, tetapi uninstall, penghapusan data aplikasi, clear(), dan remove() tetap menghapusnya.

Referensi Lengkap

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

Lanjut ke Menggunakan @capgo/capacitor-asset-cache

Jika Anda menggunakan Menggunakan @capgo/capacitor-asset-cache untuk merencanakan pemuatan media persisten, hubungkan dengan @capgo/capacitor-asset-cache untuk detail implementasi, Panduan Memulai untuk detail implementasi, @capgo/capacitor-downloader untuk download di background secara eksplisit, dan @capgo/capacitor-file untuk akses file lokal secara umum.