Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kullanılabilir Depolama Alanının Tahmini

Jeff Posnick

özet

Chrome 61 ve daha sonra diğer tarayıcılarda, bir web uygulamasının ne kadar depolama alanı kullandığı ve ne kadar depolama alanı kaldığıyla ilgili tahminler gösterilecek.

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({usage, quota}) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  });
}

Modern web uygulamaları ve veri depolama alanı

Modern bir web uygulamasının depolama alanı ihtiyaçlarını düşünürken, depolanan verileri iki kategoriye ayırmak faydalı olur: web uygulamasını yüklemek için gereken temel veriler ve uygulama yüklendikten sonra anlamlı kullanıcı etkileşimi için gereken veriler.

Web uygulamanızı yüklemek için gereken ilk veri türü HTML, JavaScript, CSS ve belki de bazı resimlerden oluşur. Hizmet çalışanları, Cache Storage API ile birlikte, bu temel kaynakları kaydedip daha sonra web uygulamanızı hızlıca yüklemek için ideal olarak ağı tamamen atlayarak kullanmak üzere gerekli altyapıyı sağlar. (Yeni Workbox kitaplıkları veya eski sw-precache gibi web uygulamanızın derleme süreciyle entegre olan araçlar, bu tür verileri depolama, güncelleme ve kullanma sürecini tamamen otomatikleştirebilir.)

Peki diğer veri türleri ne olacak? Bunlar, web uygulamanızı yüklemek için gerekli olmayan ancak genel kullanıcı deneyiminizde önemli bir rol oynayabilecek kaynaklardır. Örneğin, bir resim düzenleme web uygulaması yazıyorsanız kullanıcıların düzeltmeler arasında geçiş yapmasına ve çalışmalarını geri almasına olanak tanıyarak bir resmin bir veya daha fazla yerel kopyasını kaydetmek isteyebilirsiniz. Alternatif olarak, çevrimdışı medya oynatma deneyimi geliştiriyorsanız ses veya video dosyalarını yerel olarak kaydetme özelliği kritik önem taşır. Kişiselleştirilebilen her web uygulamasının bir tür durum bilgisi kaydetmesi gerekir. Bu tür çalışma zamanı depolama alanı için ne kadar alan olduğunu nasıl anlarsınız ve alanınız tükendiğinde ne olur?

Geçmiş: `window.webkitStorageInfo` ve `navigator.webkitTemporaryStorage`

Tarayıcılar, geçmişte çok eski (ve kullanımdan kaldırılmış) window.webkitStorageInfo ve o kadar eski olmasa da standart olmayan navigator.webkitTemporaryStorage gibi ön ek eklenmiş arayüzler aracılığıyla bu tür iç gözlemi desteklemiştir. Bu arayüzler yararlı bilgiler sağlasa da web standardı olarak gelecekleri yoktur.

İşte bu noktada WHATWG Depolama Alanı Standardı devreye giriyor.

Gelecek: `navigator.storage`

Storage Living Standard ile ilgili devam eden çalışmalar kapsamında, navigator.storage olarak tarayıcılara sunulan StorageManager arayüzüne birkaç yararlı API eklendi. Diğer birçok yeni web API'si gibi navigator.storage de yalnızca güvenli (HTTPS veya localhost üzerinden sunulan) kaynaklarda kullanılabilir.

Geçen yıl, web uygulamanızın depolama alanının otomatik temizlemeden muaf tutulmasını istemesine olanak tanıyan navigator.storage.persist() yöntemini kullanıma sunduk.

Artık navigator.webkitTemporaryStorage.queryUsageAndQuota() için modern bir alternatif olarak navigator.storage.estimate() yöntemi de bu yönteme eklendi. estimate() benzer bilgiler döndürür ancak diğer modern asenkron API'lerle uyumlu olan söze dayalı bir arayüz sunar. estimate() işlevinin döndürdüğü söz, iki özellik içeren bir nesneyle çözülür: usage, şu anda kullanılan bayt sayısını temsil eder ve quota, mevcut kaynak tarafından depolanabilecek maksimum bayt sayısını temsil eder. (Depolama alanıyla ilgili diğer her şey gibi, kota da kaynağın tamamına uygulanır.)

Bir web uygulaması, örneğin IndexedDB veya Cache Storage API'yi kullanarak belirli bir kaynağın mevcut kotasını aşacak kadar büyük verileri depolamaya çalışırsa istek QuotaExceededError istisnasıyla birlikte başarısız olur.

Depolama alanı tahminleri

estimate()'ü tam olarak nasıl kullanacağınız, uygulamanızın depolaması gereken veri türüne bağlıdır. Örneğin, kullanıcı arayüzünüzdeki bir kontrolü güncelleyerek her depolama işlemi tamamlandıktan sonra kullanıcıların ne kadar alan kullanıldığını bilmesini sağlayabilirsiniz. Ardından, kullanıcıların artık ihtiyaç duymadıkları verileri manuel olarak temizlemelerine olanak tanıyan bir arayüz sunmanız idealdir. Aşağıdaki gibi bir kod yazabilirsiniz:

// For a primer on async/await, see
// https://developers.google.com/web/fundamentals/getting-started/primers/async-functions
async function storeDataAndUpdateUI(dataUrl) {
  // Pro-tip: The Cache Storage API is available outside of service workers!
  // See https://googlechrome.github.io/samples/service-worker/window-caches/
  const cache = await caches.open('data-cache');
  await cache.add(dataUrl);

  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const {usage, quota} = await navigator.storage.estimate();
    const percentUsed = Math.round(usage / quota * 100);
    const usageInMib = Math.round(usage / (1024 * 1024));
    const quotaInMib = Math.round(quota / (1024 * 1024));

    const details = `${usageInMib} out of ${quotaInMib} MiB used (${percentUsed}%)`;

    // This assumes there's a <span id="storageEstimate"> or similar on the page.
    document.querySelector('#storageEstimate').innerText = details;
  }
}

Tahmin ne kadar doğru?

İşlevden döndürülen verilerin, bir kaynağın kullandığı alanın yalnızca bir tahmini olduğunu göz ardı etmek kolaydır. İşlev adında yer alıyor. usage ve quota değerlerinin sabit olması amaçlanmamıştır. Bu nedenle, aşağıdakileri dikkate almanız önerilir:

usage, belirli bir kaynağın aynı kaynak verileri için etkili bir şekilde kaç bayt kullandığını gösterir. Bu değer, dahili sıkıştırma teknikleri, kullanılmayan alanı içerebilecek sabit boyutlu tahsis blokları ve silme işleminden sonra geçici olarak oluşturulabilecek "mezar taşı" kayıtlarının varlığından etkilenebilir. Tam boyut bilgilerinin sızmasını önlemek için yerel olarak kaydedilen kaynaktan bağımsız, saydam olmayan kaynaklar, toplam usage değerine ek dolgu baytları ekleyebilir.
quota, şu anda bir kaynak için ayrılmış alan miktarını yansıtır. Bu değer, genel depolama alanı boyutu gibi bazı sabit faktörlere ve aynı zamanda şu anda kullanılmayan depolama alanı miktarı da dahil olmak üzere değişken olabilecek çeşitli faktörlere bağlıdır. Bu nedenle, cihazdaki diğer uygulamalar veri yazarken veya silerken, tarayıcı web uygulamanızın kaynağına ayırmak istediği alan miktarı büyük olasılıkla değişir.

Günümüzde: özellik algılama ve yedek çözümler

estimate(), Chrome 61'den itibaren varsayılan olarak etkindir. Firefox, navigator.storage ile deneysel çalışmalar yapıyor ancak Ağustos 2017 itibarıyla bu özellik varsayılan olarak etkin değildir. Test etmek için dom.storageManager.enabled tercihini etkinleştirmeniz gerekir.

Henüz tüm tarayıcılarda desteklenmeyen işlevlerle çalışırken özellik algılama zorunludur. Aşağıdaki gibi tutarlı bir arayüz sağlamak için özellik algılamayı, eski navigator.webkitTemporaryStorage yöntemlerinin üzerine bir söze dayalı sarmalayıcıyla birlikte kullanabilirsiniz:

function storageEstimateWrapper() {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    // We've got the real thing! Return its response.
    return navigator.storage.estimate();
  }

  if ('webkitTemporaryStorage' in navigator &&
      'queryUsageAndQuota' in navigator.webkitTemporaryStorage) {
    // Return a promise-based wrapper that will follow the expected interface.
    return new Promise(function(resolve, reject) {
      navigator.webkitTemporaryStorage.queryUsageAndQuota(
        function(usage, quota) {resolve({usage: usage, quota: quota})},
        reject
      );
    });
  }

  // If we can't estimate the values, return a Promise that resolves with NaN.
  return Promise.resolve({usage: NaN, quota: NaN});
}