Semua browser memberlakukan batas maksimum jumlah penyimpanan yang boleh digunakan oleh origin aplikasi web Anda. Anda dapat mengonfigurasi Workbox untuk secara otomatis membersihkan data yang disimpan dalam cache pada saat runtime untuk menghindari batasan kuota penyimpanan yang dapat memengaruhi efisiensi dan keandalan penyimpanan situs Anda.
Opsi konfigurasi apa yang didukung?
Saat menyiapkan strategi pembuatan cache rute dan runtime, Anda dapat menambahkan instance ExpirationPlugin dari workbox-expiration yang dikonfigurasi dengan setelan yang paling sesuai untuk jenis aset yang disimpan dalam cache.
Misalnya, konfigurasi berikut dapat digunakan untuk menyimpan gambar dalam cache saat runtime, dengan batas 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 perlu menyetel maxEntries, maxAgeSeconds, atau keduanya saat menggunakan ExpirationPlugin. purgeOnQuotaError bersifat opsional.
maxEntries
Hal ini memberlakukan batas maksimum jumlah entri (yaitu, URL unik) untuk cache tertentu.
Menetapkan ini biasanya merupakan ide bagus, kecuali jika Anda tahu bahwa hanya ada sedikit URL yang mungkin dapat ditangani oleh strategi tertentu.
maxAgeSeconds
Entri yang ditambahkan ke cache lebih dari jumlah detik yang lalu akan dianggap tidak berlaku dan akan dibersihkan secara otomatis saat cache diakses lagi.
Ini tidak seefektif dalam mengelola kuota penyimpanan seperti maxEntries, karena cache Anda dapat bertambah besar secara bebas selama semua entri ditambahkan dalam jangka waktu yang singkat. Hal ini paling berguna jika Anda mengetahui bahwa ada batas atas keaktualan yang ingin diterapkan, dan mempertahankan entri lama hanya sedikit memberikan nilai untuk aplikasi web Anda.
purgeOnQuotaError
Opsi ini memungkinkan Anda menandai cache tertentu sebagai aman untuk dihapus secara otomatis apabila aplikasi web Anda melebihi penyimpanan yang tersedia.
Untuk saat ini, opsi ini ditetapkan secara default ke false. Secara umum, cache runtime harus tetap tahan terhadap penghapusan, jadi menetapkan opsi ini ke true adalah praktik yang baik, dan membantu memastikan aplikasi web Anda dapat pulih secara otomatis jika terjadi batasan penyimpanan.
Berapa banyak data yang boleh Anda simpan?
Setiap browser memiliki batas atas penyimpanannya sendiri, sehingga tidak ada jawaban tunggal. Selain itu, beberapa browser memiliki batas dinamis yang bervariasi berdasarkan jumlah penyimpanan yang tersedia di perangkat tertentu, sehingga batas maksimum efektif dapat berubah tanpa pemberitahuan.
Beberapa browser menampilkan antarmuka untuk mengkueri perkiraan jumlah penyimpanan yang digunakan origin Anda, bersama dengan batas atas, melalui navigator.storage.estimate(). Artikel "Memperkirakan Ruang Penyimpanan yang Tersedia" memiliki informasi selengkapnya tentang cara menggunakannya di aplikasi web Anda sendiri.
Pertimbangan Samaran Chrome khusus
Membuka aplikasi web dalam mode Samaran Chrome menerapkan pembatasan 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.
Hati-hati dengan respons buram!
Sumber umum dari penggunaan kuota tinggi yang tidak terduga adalah karena cache runtime dari respons buram, yang berarti, respons lintas origin untuk permintaan yang dibuat tanpa mengaktifkan CORS.
Browser secara otomatis meng-inflate dampak kuota respons buram tersebut sebagai pertimbangan keamanan. Di Chrome, misalnya, bahkan respons buram beberapa kilobyte akan pada akhirnya berkontribusi sekitar 7 megabyte terhadap penggunaan kuota Anda.
Anda dapat dengan cepat menggunakan lebih banyak kuota daripada yang diperkirakan setelah mulai meng-cache respons buram, sehingga praktik terbaik adalah menggunakan ExpirationPlugin dengan maxEntries, dan mungkin purgeOnQuotaError, dikonfigurasi dengan tepat.