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

Kullanılabilir Depolama Alanının Tahmini

Jeff Posnick

Twitter GitHub Ana sayfa

tl;dr

İlerleyen zamanlarda daha fazla tarayıcıyla birlikte Chrome 61, artık bir web uygulamasının ne kadar depolama alanı kullandığı ve aşağıdakiler aracılığıyla ne kadar depolama alanı kullanabileceğine dair bir tahmin sunuyor:

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

Modern bir web uygulamasının depolama alanı ihtiyaçlarını göz önünde bulundurduğunuzda, verileri iki kategoriye ayırmaya yardımcı 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. Cache Storage API ile birlikte Service Worker, bu temel kaynakları kaydetmek ve daha sonra bunları kullanarak web uygulamanızı hızla yüklemek için gerekli altyapıyı sağlar. Böylece ağı tamamen atlayabilirsiniz. (Yeni Workbox kitaplıkları veya daha 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 ya diğer veri türlerinde? Bunlar web uygulamanızın yüklenmesi için gerekli olmayan, ancak genel kullanıcı deneyiminizde çok önemli bir rol oynayabilecek kaynaklardır. Örneğin, bir görsel düzenleme web uygulaması yazıyorsanız kullanıcıların düzeltmeler arasında geçiş yapıp çalışmalarını geri almalarına olanak tanımak için bir resmin bir veya daha fazla yerel kopyasını kaydetmek isteyebilirsiniz. Veya çevrimdışı medya oynatma deneyimi geliştiriyorsanız, ses veya video dosyalarını yerel olarak kaydetmek önemli bir özellik olacaktır. Kişiselleştirilebilen her web uygulamasının, bir dizi eyalet bilgisini kaydetmesi gerekir. Bu tür bir çalışma zamanı depolama alanı için ne kadar kullanılabilir alan olduğunu ve alanınız tükendiğinde ne olduğunu nasıl anlarsınız?

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

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

İşte burada whatWG Depolama Standardı devreye giriyor.

Gelecek: `navigator.storage`

Storage Living Standard'da devam eden çalışmalar kapsamında, birkaç faydalı API, tarayıcıların navigator.storage olarak erişebildiği StorageManager arayüzüne entegre edildi. Diğer birçok yeni web API'si gibi navigator.storage de yalnızca güvenli (HTTPS veya localhost aracılığıyla sunulur) kaynaklarda kullanılabilir.

Geçen yıl navigator.storage.persist() yöntemini kullanıma sunduk. Bu yöntem, web uygulamanızın depolama alanının otomatik temizleme işleminden muaf tutulmasını istemesine olanak tanır.

Şimdi, navigator.webkitTemporaryStorage.queryUsageAndQuota() için modern bir yedek işlevi gören navigator.storage.estimate() yöntemiyle birleştiriliyor. estimate() benzer bilgiler döndürür ancak diğer modern eşzamansız API'lere uygun olan vaat tabanlı bir arayüz sunar. estimate() işlevi, iki özellik içeren bir nesneyle çözümlenir: şu anda kullanılan bayt sayısını temsil eden usage ve mevcut kaynak tarafından depolanabilecek maksimum bayt sayısını temsil eden quota. (Depolamayla ilgili diğer her şey gibi kota da tüm kaynak genelinde uygulanır.)

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

Depolama alanı tahminlerinin işleyiş şekli

estimate() hizmetini tam olarak nasıl kullanacağınız, uygulamanızın depolaması gereken veri türüne bağlıdır. Örneğin, her depolama işlemi tamamlandıktan sonra ne kadar alanın kullanıldığını kullanıcılara bildirmek için arayüzünüzdeki bir denetimi güncelleyebilirsiniz. Bu durumda ideal olarak, kullanıcıların artık ihtiyaç duymayan verileri manuel olarak temizlemesine olanak tanıyan bir arayüz sağlayabilirsiniz. Aşağıdakileri içeren 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ğrudur?

Fonksiyondan elde ettiğiniz verilerin, yalnızca bir başlangıç noktasının kullandığı alana ilişkin bir tahmin olduğu gerçeği gözden kaçırılmaz. İşte burada fonksiyon adında var! usage ve quota değerlerinin kararlı olması amaçlanmamıştır. Bu nedenle, aşağıdakileri dikkate almanız önerilir:

usage, belirli bir kaynağın aynı kaynak verileri için etkin olarak kaç bayt kullandığını gösterir. Bu veriler dahili sıkıştırma tekniklerinden, kullanılmayan alan içerebilen sabit boyutlu ayırma bloklarından ve silme işleminden sonra geçici olarak oluşturulabilecek "tombstone" kayıtlarının varlığından etkilenebilir. Tam boyut bilgilerinin sızdırılmasını önlemek için yerel olarak kaydedilen kaynaklar arası, opak kaynaklar, genel usage değerine ek dolgu baytları ekleyebilir.
quota, bir kaynak için hâlihazırda ayrılmış alanın miktarını yansıtır. Bu değer, toplam depolama boyutu gibi bazı sabit etkenlere ve aynı zamanda kullanılmayan depolama alanı miktarı gibi değişken olabilecek çeşitli faktörlere bağlıdır. Bu nedenle, bir cihazdaki diğer uygulamalar veri yazdığı veya sildiği için tarayıcının web uygulamanızın kaynağına ayırmak istediği alan miktarı muhtemelen değişecektir.

Mevcut durum: özellik algılama ve yedekler

estimate(), Chrome 61'den itibaren varsayılan olarak etkindir. Firefox, navigator.storage ile denemeler yapıyor, ancak Ağustos 2017'den itibaren varsayılan olarak etkin durumda 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 bir zorunluluktur. Aşağıdaki alanlarda tutarlı bir arayüz sağlamak için eski navigator.webkitTemporaryStorage yöntemlerinin yanı sıra özellik algılamayı söze dayalı bir sarmalayıcıyla birleştirebilirsiniz:

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