Menggunakan @capgo/capacitor-asset-cache

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

Instal

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

Apa yang Dapat Diketahui Plugin Ini

bind - Menghubungkan elemen gambar atau video ke sumber lokal asset dan memperbarui ketika siap.
src - Mengembalikan string sumber lokal setelah asset ada di lokal.
resolve - Kembalikan sumber lokal bersama metadata cache.
configure - Atur perilaku CDN dan revalidasi default.
get, list, remove, clear, dan getCacheSize - Kelola cache secara eksplisit ketika diperlukan.

Contoh Penggunaan

Konfigurasi CDN sekali, kemudian ikat elemen dengan jalur 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 itu mendapatkan data-asset-cache-state="loading" sambil fetch asli berjalan, kemudian menerima URL sumber lokal dan berpindah ke ready.

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

Aset Terlindung

Kepala dikirim oleh plugin saat itu mengambil atau memvalidasi kembali file remote. Elemen web masih menerima hanya URL sumber lokal.

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

Tanpa URL CDN Dasar

Kirim URL absolut ketika Anda tidak ingin mengonfigurasi cdnUrl.

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

Jalur relatif memerlukan baik konfigurasi cdnUrl atau panggilan per- cdnUrl.

Catatan Penyimpanan

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

Referensi Lengkap

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

Teruskan dari Menggunakan @capgo/capacitor-cache-asset

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.

Cache Asset

Tutorial tentang Cache Asset