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

Kullanılabilir Depolama Alanının Tahmini

Jeff Posnick

tl;dr

İlerleyen zamanlarda daha fazla tarayıcı gelecek olan Chrome 61, artık bir web uygulamasının kullandığı depolama alanı miktarına ve kullanılabilen depolama alanı miktarına 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 ihtiyaçlarını göz önünde bulundurduğunuzda, nelerin depolandığını iki kategoriye ayırmak faydalı olacaktır: 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'lar, bu temel kaynakları kaydetmek ve daha sonra web uygulamanızı hızlı bir şekilde yüklemek amacıyla bunları kullanmak için gereken altyapıyı sağlar. Bu sayede ideal olarak ağı tamamen atlarlar. (Yeni Workbox kitaplıkları veya daha eski sw-precache gibi web uygulamanızın derleme süreciyle entegre olan araçlar, bu tür verilerin depolanması, güncellenmesi ve kullanılması sürecini tamamen otomatikleştirebilir.)

Peki ya diğer veri türü? Bunlar, web uygulamanızı yüklemek için gerekli olmayan ancak genel kullanıcı deneyiminizde çok önemli bir rol oynayabilecek kaynaklardır. Örneğin, bir görüntü düzenleme web uygulaması yazıyorsanız bir resmin bir veya daha fazla yerel kopyasını kaydederek kullanıcıların düzeltmeler arasında geçiş yapmalarına ve işlerini geri almalarına olanak tanıyabilirsiniz. Veya çevrimdışı bir medya oynatma deneyimi geliştiriyorsanız ses veya video dosyalarını yerel olarak kaydetmek kritik bir özellik olur. Kişiselleştirilebilen her web uygulamasının, bir tür durum bilgisini kaydetmesi gerekir. Bu tür çalışma zamanı depolama alanı için ne kadar kullanılabilir alan olduğunu ve odanız tükendiğinde ne olduğunu nasıl bilebilirsiniz?

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

Tarayıcılar geçmişte, çok eski (ve desteği sonlandırılmış) window.webkitStorageInfo ve alışılmışın dışında olan ama hâlâ standart olmayan navigator.webkitTemporaryStorage gibi önekli arayüzler aracılığıyla bu tür iç gözlemi desteklemektedir. Bu arayüzler yararlı bilgiler sağlasa da, web standartları olarak değişecek bir gelecekleri yoktur.

whatWG Depolama Standardı bu noktada devreye giriyor.

Gelecek: `navigator.storage`

Storage Living Standard'da devam eden çalışmalar kapsamında, birkaç faydalı API, tarayıcılara navigator.storage olarak gösterilen StorageManager arayüzüne ulaştı. Yeni birçok web API'si gibi navigator.storage da yalnızca güvenli (HTTPS veya localhost aracılığıyla sunulur) 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.

Şimdi ise navigator.webkitTemporaryStorage.queryUsageAndQuota() yerine modern olarak kullanılan navigator.storage.estimate() yöntemi birleşiyor. estimate() benzer bilgiler döndürür ancak diğer modern eşzamansız API'lerle uyumlu olan vaade dayalı bir arayüz sunar. estimate() işlevinin verdiği söz, iki özellik içeren bir nesneyle çözümlenir: usage (şu anda kullanılan bayt sayısını temsil eder) ve mevcut kaynak tarafından depolanabilecek maksimum bayt sayısını temsil eden quota. (Depolamayla ilgili diğer her şey gibi kota da kaynağın tamamına uygulanır.)

Bir web uygulaması, belirli bir kaynağı mevcut kotasını aşmaya yetecek büyüklükteki verileri (ör. IndexedDB veya Cache Storage API) depolamaya çalışırsa istek, QuotaExceededError istisnasıyla başarısız olur.

Depolama alanı tahminlerinin uygulanması

estimate() ürününü tam olarak nasıl kullandığınız, uygulamanızın depolaması gereken veri türüne bağlıdır. Örneğin, arayüzünüzdeki bir denetimi güncelleyerek kullanıcıların her depolama işlemi tamamlandıktan sonra ne kadar alan kullanıldığını bilmesini sağlayabilirsiniz. Bu durumda ideal olarak, kullanıcıların artık ihtiyaç duyulmayan verileri manuel olarak temizlemesine olanak tanıyan bir arayüz sağlamanız gerekir. Şu satırlarda 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 aldığınız verilerin, kaynağın kullandığı alana dair bir tahminden ibaret olduğu gerçeğini gözden kaçırmamak gerekir. İşte tam da bu fonksiyon adında! 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ı kaynaklı veriler 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 çapraz kaynak, opak kaynaklar genel usage değerine ek dolgu baytları ekleyebilir.
quota, bir kaynak için halihazırda ayrılmış alan miktarını gösterir. Değer, toplam depolama alanı boyutu gibi bazı sabit faktörlere bağlıdır. Ayrıca, şu anda kullanılmayan depolama alanı miktarı gibi değişken olabilecek bir dizi faktöre de bağlıdır. Dolayısıyla, bir cihazdaki diğer uygulamalar veri yazdıkça veya sildiğinde tarayıcının web uygulamanızın kaynağına ayırmaya hazır olduğu alan miktarı muhtemelen değişecektir.

Şimdiki zaman: özellik algılama ve yedekler

estimate(), Chrome 61 sürümünden itibaren varsayılan olarak etkindir. Firefox, navigator.storage ile deneme yapıyor, ancak Ağustos 2017 itibarıyla bu özellik varsayılan olarak etkin değil. 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ğıdakiler gibi tutarlı bir arayüz sağlamak için özellik algılamayı eski navigator.webkitTemporaryStorage yöntemlerinin üzerinde vaat tabanlı bir sarmalayıcı ile 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});
}