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

Kullanılabilir Depolama Alanının Tahmini

Jeff Posnick

tl;dr

Gelecekte daha fazla tarayıcı sunulacak olan Chrome 61, artık kullanıcılarımızın bir web uygulamasının kullandığı depolama alanı ve bunun ne kadarını kullanabileceğiniz:

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ı düşündüğünüzde, nelerin depolandığını iki kategoriye ayırın: yüklemek için gereken temel veriler web uygulaması ve anlamlı kullanıcı etkileşimi için gerekli olan verileri tekrar yükleyebilirsiniz.

Web uygulamanızı yüklemek için gereken ilk veri türü; HTML, JavaScript, CSS ve belki bazı resimler. Service Worker'lar ve Önbellek Depolama API'si, Bu temel kaynakları kaydetmek ve daha sonra web uygulamanızı hızlı bir şekilde yüklemenize olanak tanır. Böylece, ideal olarak ağı tamamen atlarlar. (Web uygulamanızın derleme süreciyle entegre olan yeni araçlar, Workbox kitaplıkları veya daha eski kitaplıklar sw-precache, bu tür depolama, güncelleme ve kullanma sürecini tamamen otomatikleştirebilir data.)

Peki ya diğer veri türü? Bunlar, bir projeyi web uygulamanızı yükler, ancak bu, kullanıcı performansınızın sahip olacaksınız. Örneğin, bir görüntü düzenleme web uygulaması yazıyorsanız, bir veya daha fazla yerel kopyasını kaydedip kullanıcılara kontrol edip çalışmalarını geri alabilir. Ya da çevrimdışı medya geliştiriyorsanız yerel olarak kaydetmek, özellikle de oynatmalarınızı özelliğini kullanabilirsiniz. Kişiselleştirilebilecek her web uygulamasının birtakım eyalet bilgileri gibidir. Bu tür bir çalışma zamanı depolama alanı için ne kadar kullanılabileceğini nasıl bilebilirsiniz? Peki odanız tükendiğinde ne oluyor?

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

Tarayıcılar bugüne kadar bu tür iç gözlem türünü çok eski (ve kullanımdan kaldırılmış) gibi arayüzler window.webkitStorageInfo olarak gördüğünüz gibi, standart olmayan navigator.webkitTemporaryStorage. Bu arayüzler yararlı bilgiler sağlasa da, web standartları olarak öne çıkacaktır.

WHEREWG Depolama Standardı resime girer.

Gelecek: `navigator.storage`

Storage Living Standard (Depolama Alanı Yaşam Standardı) ile ilgili devam eden çalışmalar kapsamında, birkaç faydalı API kullanıma sunuldu. onu StorageManager arayüzü; kullanıcı arayüzü, navigator.storage. Yeni birçok web API'si gibi navigator.storage da yalnızca güvenli olarak kullanılabilir (HTTPS veya localhost aracılığıyla sunulur) kaynakları üzerinden sunulur.

Geçen yıl Google Ads'i kullanıma sunduk navigator.storage.persist() yöntemidir. Bu yöntem, web uygulamanızın depolama alanının yeterli olmasını istemesini sağlar. otomatik temizlemeden muaf tutuldu.

Şimdi, Google Analytics 4'teki navigator.storage.estimate() yöntemi ile birleştirildi. navigator.webkitTemporaryStorage.queryUsageAndQuota() için modern bir alternatif. estimate() benzer bilgiler döndürür, ancak vaade dayalı bir arayüz kullanıyorsanız . Projenin başarısı estimate() işlevi, şu iki özellik içeren bir nesneyle çözümlenir: usage, ve quota, kullanılan bayt sayısını temsil eden geçerli olacak şekilde depolanabilecek maksimum bayt origin. (Depolama alanıyla ilgili diğer her şey gibi, kota da bir bütün olarak origin.)

Bir web uygulaması, örneğin IndexedDB veya Cache Storage API: Belirli bir kaynağı kendi isteği yerine getirirseniz, istek, QuotaExceededError kabul edersiniz.

Depolama alanı tahminlerinin uygulanması

estimate() ürününü tam olarak nasıl kullanacağınız, uygulamanızın ihtiyaç duyduğu veri türüne bağlıdır mağaza. Örneğin, arayüzinizdeki bir denetimi güncelleyerek kullanıcıların her depolama işlemi tamamlandıktan sonra ne kadar alanın kullanıldığını öğrenebilirsiniz. Bu durumda tercihen, kullanıcıların verileri manuel olarak temizlemesine olanak tanıyan bir arayüz sağlamanız gerekir. artık gerekmiyor. Ş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 geri aldığınız verilerin sadece kaynağın kullandığı alana dair bir tahmin. Tüm bu öğeler, ad! usage ve quota değerlerinin kararlı olması amaçlanmamıştır. Bu nedenle aşağıdakileri göz önünde bulundurmanız önerilir:

usage, belirli bir kaynağın aynı-kaynak dahili sıkıştırma tekniklerinden etkilenebilir. kullanılmayan alan içerebilecek sabit boyutlu ayırma blokları ve "tombstone"un kayıtlar geçici olarak oluşturulabilir. Sızıntıyı önlemek için kökleri arasını veya boyutlarının opak kaynaklar yerel olarak kaydedilenler, toplam usage depolama alanına ek dolgu baytları katkısı sağlayabilir değer.
quota, bir kaynak için halihazırda ayrılmış alan miktarını gösterir. İlgili içeriği oluşturmak için kullanılan değeri, toplam depolama alanı boyutu gibi bazı sabit faktörlere bağlıdır. depolama alanı miktarı da dahil olmak üzere değişken olabilecek faktörlerin şu anda kullanılmıyor. Bu nedenle, cihazdaki diğer uygulamalar tarayıcının web sitenize ayırmak istediği alan miktarıdır. kaynağı 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ılıyor, ancak Ağustos 2017 itibarıyla varsayılan olarak açıktır. Şunları yapmanız gerekir: dom.storageManager.enabled tercihini etkinleştir kullanması gerekir.

Tüm tarayıcılarda henüz desteklenmeyen işlevlerle çalışırken bir gerekliliktir. Özellik algılamayı eski navigator.webkitTemporaryStorage üzerinde vaatlere dayalı sarmalayıcı Aşağıdakiler gibi tutarlı bir arayüz sağlamak için farklı yöntemler kullanır:

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