Cache Asset

Menggunakan @capgo/capacitor-cache-asset

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

Instal

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

Apa yang Dibuka oleh Plugin ini

• bind - Menghubungkan elemen gambar atau video ke sumber aset lokal dan memperbarui ketika siap.
• src - Mengembalikan string sumber lokal setelah aset ada di lokal.
• resolve - Mengembalikan sumber lokal plus metadata cache.
• configure - Mengatur perilaku CDN default dan revalidasi.
• get, list, remove, clear- Mengelola cache secara eksplisit ketika dibutuhkan. getCacheSize - Contoh Penggunaan

- Konfigurasi CDN sekali, kemudian ikat elemen dengan jalur relatif:

- Elemen mendapatkan

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

- sementara fetch native berjalan, kemudian menerima URL sumber lokal dan berpindah ke data-asset-cache-state="loading" - Aset Terlindung ready.

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

- Kepala dikirim oleh plugin ketika mengambil atau merevalidasi file remote. Elemen web masih menerima hanya URL sumber lokal.

- Contoh Penggunaan

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

Tidak Menggunakan Basis URL CDN

Pasang URL Absolut Ketika Anda Tidak Ingin Mengkonfigurasi cdnUrl.

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

Jalur Relatif Memerlukan Atau Konfigurasi cdnUrl atau Pemanggilan Per-Sekali cdnUrl.

Catatan Penyimpanan

Pada iOS, file hidup di bawah Support Aplikasi dan dikecualikan dari backup iCloud. Pada Android, file hidup di bawah direktori file internal aplikasi. Sistem tidak menganggap file ini sebagai file cache sementara yang dapat dibuang, tetapi penghapusan aplikasi, penghapusan data aplikasi, clear(), dan remove() masih menghapusnya.

Referensi Lengkap

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

Teruskan dari Menggunakan @capgo/capacitor-asset-cache

Jika Anda menggunakan Menggunakan @capgo/capacitor-asset-cache untuk merencanakan muatan media yang persisten, hubungkannya dengan @capgo/capacitor-asset-cache untuk detail implementasi, Mulai untuk detail implementasi, @capgo/capacitor-downloader untuk download latar belakang yang eksplisit, dan @capgo/capacitor-file untuk akses file lokal umum.