Langkahkan ke konten utama
Logo Capgo
Kembali ke plugin

Panduan

Tutorial Cache Asset

Menggunakan @capgo/capacitor-cache-asset

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

Instal

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

Apa yang Dikembangkan oleh Plugin Ini

  • bind - Menghubungkan elemen gambar atau video ke sumber lokal asset dan memperbarui ketika sudah siap.
  • src - Mengembalikan string sumber lokal setelah asset ada di lokal.
  • resolve - Kembalikan sumber lokal plus metadata cache.
  • configure - Atur perilaku default CDN dan revalidasi.
  • get, list, remove, clear, dan getCacheSize - Atur 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 Terlindung

Kepala dikirim oleh plugin ketika 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}`,
  },
});

Tidak Ada 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 yang telah ditentukan 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 penghapusan aplikasi, penghapusan data aplikasi, clear(), dan remove() masih menghapusnya.

Referensi Lengkap

Teruskan dari Menggunakan @capgo/capacitor-asset-cache

Jika Anda menggunakan Gunakan @capgo/capacitor-asset-cache untuk merencanakan penggunaan 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.