Depolama alanı kotasını anlama

Tüm tarayıcılar, web uygulamanızın kaynaksının kullanmasına izin verilen depolama alanı miktarına bir üst sınır uygular. Web sitenizin önbelleğe alma verimliliğini ve güvenilirliğini etkileyebilecek depolama alanı kotası sınırlamalarıyla karşılaşmamak için Workbox'ı çalışma zamanında önbelleğe aldığı verileri otomatik olarak temizleyecek şekilde yapılandırabilirsiniz.

Hangi yapılandırma seçenekleri desteklenir?

Bir rota ve çalışma zamanı önbelleğe alma stratejisi ayarlarken, önbelleğe aldığınız öğe türü için en mantıklı ayarlarla yapılandırılmış workbox-expiration öğesinden ExpirationPlugin örneğini ekleyebilirsiniz.

Örneğin, çalışma zamanında görüntüleri önbelleğe almak için aşağıdaki yapılandırma hem açık sınırlarla hem de kota aşılırsa otomatik temizlemeyle birlikte kullanılabilir:

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
      })
    ]
  })
);

ExpirationPlugin kullanırken maxEntries, maxAgeSeconds veya her ikisini birden ayarlamanız gerekir. purgeOnQuotaError isteğe bağlıdır.

maxEntries

Bu, belirli bir önbellek için giriş (yani benzersiz URL) sayısına bir üst sınır uygular.

Belirli bir strateji tarafından işlenmiş olabilecek yalnızca az sayıda olası URL olduğundan emin olmadığınız sürece, bunu ayarlamak normalde iyi bir fikirdir.

maxAgeSeconds

Önbelleğe bu sayıda saniyeden daha uzun süre önce eklenmiş girişler eski olarak kabul edilir ve önbelleğe bir sonraki erişimde otomatik olarak temizlenir.

Girişlerin tümü kısa bir süre içinde eklendiği sürece önbellekleriniz isteğe bağlı olarak büyüyebildiğinden bu yöntem, depolama alanı kotasının yönetilmesinde maxEntries kadar etkili değildir. Yenilik için uygulamak istediğiniz bir üst sınır olduğunu ve eski girişlerin geride kalmanın web uygulamanız için çok az değeri olduğunu bildiğinizde bu yöntem çok kullanışlıdır.

purgeOnQuotaError

Bu seçenek, web uygulamanızın kullanılabilir depolama alanını aşması halinde belirli bir önbelleği, otomatik olarak silinecek şekilde güvenli olarak işaretlemenize olanak tanır.

Bu seçenek şu anda varsayılan olarak false değerine ayarlanmıştır. Çalışma zamanı önbellekleri, genel olarak silinme karşısında dayanıklı olmalıdır. Bu nedenle, bu seçeneğin true olarak ayarlanması iyi bir uygulamadır ve web uygulamanızın, depolama alanı kısıtlamaları karşısında otomatik olarak kurtarmasına yardımcı olur.

Ne kadar veri depolamanıza izin veriliyor?

Her tarayıcının depolama alanı konusunda kendi üst sınırları olduğundan tek bir cevap yoktur. Ayrıca, bazı tarayıcıların dinamik sınırı vardır ve bu sınır, belirli bir cihazdaki ücretsiz depolama alanı miktarına göre değişir. Bu nedenle geçerli üst sınır, önceden haber verilmeksizin değiştirilebilir.

Bazı tarayıcılarda, navigator.storage.estimate() aracılığıyla üst sınırın yanı sıra kaynağınızın kullandığı yaklaşık depolama alanı miktarını sorgulamak için bir arayüz sunulur. "Kullanılabilir Depolama Alanını Tahmin Etme" başlıklı makalede, bu alanı kendi web uygulamalarınızda nasıl kullanabileceğiniz hakkında daha fazla bilgi bulabilirsiniz.

Chrome'da dikkat edilmesi gereken özel noktalar

Bir web uygulamasını Chrome'un Gizli modunda açmak depolama alanına, normal göz atma bağlamları için geçerli olmayan özel bir kısıtlama getirir: Cihazınızda boş alan olup olmadığına bakılmaksızın yaklaşık 100 megabayt kota sınırı vardır.

Opak yanıtlara dikkat edin!

Beklenmedik şekilde yüksek kota kullanımının yaygın nedenlerinden biri, opak yanıtların çalışma zamanında önbelleğe alınması, yani CORS etkinleştirilmeden yapılan isteklere verilen kaynaklar arası yanıtların olmasıdır.

Tarayıcılar, güvenlik değerlendirmesi olarak bu opak yanıtların kota etkisini otomatik olarak artırır. Örneğin Chrome'da, birkaç kilobaytlık opak bir yanıt bile kota kullanımınıza yaklaşık 7 megabayt katkıda bulunacaktır.

Opak yanıtları önbelleğe almaya başladığınızda, beklediğinizden çok daha fazla kotayı hızlı bir şekilde kullanabilirsiniz. Bu nedenle en iyi uygulama, uygun şekilde yapılandırılmış maxEntries ve muhtemelen purgeOnQuotaError ile ExpirationPlugin kullanmaktır.