Semua browser memberlakukan batas atas jumlah penyimpanan yang boleh digunakan oleh asal aplikasi web Anda. Anda dapat mengonfigurasi Workbox untuk otomatis membersihkan data yang di-cache saat runtime untuk menghindari keterbatasan kuota penyimpanan yang dapat memengaruhi efisiensi dan keandalan cache situs Anda.
Opsi konfigurasi apa yang didukung?
Saat menyiapkan strategi caching rute dan runtime, Anda dapat menambahkan instance ExpirationPlugin dari workbox-expiration yang dikonfigurasi dengan setelan yang paling sesuai untuk jenis aset yang Anda simpan dalam cache.
Misalnya, konfigurasi berikut dapat digunakan untuk menyimpan gambar dalam cache saat runtime, dengan batasan eksplisit serta pembersihan otomatis jika kuota terlampaui:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
Anda harus menetapkan maxEntries, maxAgeSeconds, atau keduanya saat menggunakan ExpirationPlugin. purgeOnQuotaError bersifat opsional.
maxEntries
Hal ini akan menetapkan batas atas jumlah entri (yaitu, URL unik) untuk cache tertentu.
Sebaiknya tetapkan ini, kecuali jika Anda tahu bahwa hanya ada sedikit kemungkinan URL yang mungkin ditangani oleh strategi tertentu.
maxAgeSeconds
Entri yang ditambahkan ke cache lebih dari jumlah detik ini akan dianggap tidak berlaku, dan akan otomatis dihapus saat cache diakses lagi.
Tindakan ini tidak seefektif maxEntries dalam mengelola kuota penyimpanan, karena cache Anda dapat bertambah besar secara arbitrer selama semua entri ditambahkan dalam jangka waktu kecil. Hal ini sangat berguna jika Anda tahu bahwa ada batas atas keaktualan yang ingin Anda terapkan, dan menyimpan entri lama tidak memiliki nilai yang besar untuk aplikasi web Anda.
purgeOnQuotaError
Opsi ini memungkinkan Anda menandai cache tertentu sebagai aman untuk dihapus secara otomatis jika aplikasi web Anda melebihi penyimpanan yang tersedia.
Saat ini, opsi ini ditetapkan secara default ke false. Cache runtime, secara umum, harus tahan terhadap penghapusan, sehingga menyetel opsi ini ke true adalah praktik yang baik, dan membantu memastikan aplikasi web Anda dapat otomatis pulih saat menghadapi batasan penyimpanan.
Berapa banyak data yang diizinkan untuk Anda simpan?
Setiap browser memiliki batas atas penyimpanannya sendiri, jadi tidak ada jawaban yang pasti. Selain itu, beberapa browser memiliki batas dinamis yang bervariasi berdasarkan jumlah penyimpanan yang tersedia di perangkat tertentu, sehingga batas atas efektif dapat berubah tanpa pemberitahuan.
Beberapa browser mengekspos antarmuka untuk membuat kueri perkiraan jumlah penyimpanan yang digunakan origin Anda, beserta batas atas, melalui navigator.storage.estimate(). Artikel "Memperkirakan Ruang Penyimpanan yang Tersedia" memiliki informasi selengkapnya tentang cara menggunakannya di aplikasi web Anda sendiri.
Pertimbangan khusus untuk Samaran Chrome
Membuka aplikasi web dalam mode Samaran Chrome akan menerapkan batasan khusus pada penyimpanan yang tidak berlaku untuk konteks penjelajahan normal: ada batas kuota sekitar 100 megabyte, terlepas dari ruang kosong yang tersedia di perangkat Anda.
Waspadai respons yang tidak jelas.
Sumber umum penggunaan kuota yang tinggi secara tidak terduga adalah karena caching runtime respons buram, yaitu respons lintas asal untuk permintaan yang dibuat tanpa mengaktifkan CORS.
Browser secara otomatis meng-inflate dampak kuota dari respons buram tersebut sebagai pertimbangan keamanan. Di Chrome, misalnya, respons buram yang berukuran beberapa kilobyte akan berkontribusi sekitar 7 megabyte terhadap penggunaan kuota Anda.
Anda dapat dengan cepat menghabiskan kuota yang jauh lebih banyak daripada yang diperkirakan setelah mulai meng-cache respons buram, jadi praktik terbaiknya adalah menggunakan ExpirationPlugin dengan maxEntries, dan berpotensi purgeOnQuotaError, yang dikonfigurasi dengan tepat.