Menggunakan @capgo/capacitor-asset-cache

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

Pasang

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

Apa yang Dapat Diketahui Plugin Ini

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

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 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 Terlindungi

Kepala dikirim oleh plugin ketika itu mengambil atau merevalidasi 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-keluhan 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 yang dapat dibuang, tetapi uninstall, hapus 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, Getting Started 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