উপলব্ধ স্টোরেজ স্পেস অনুমান করা হচ্ছে

Jeff Posnick

tl; ড

Chrome 61, অনুসরণ করার জন্য আরও ব্রাউজার সহ, এখন একটি অনুমান প্রকাশ করে যে একটি ওয়েব অ্যাপ কতটা স্টোরেজ ব্যবহার করছে এবং এর মাধ্যমে কতটা উপলব্ধ:

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

আধুনিক ওয়েব অ্যাপস এবং ডেটা স্টোরেজ

আপনি যখন একটি আধুনিক ওয়েব অ্যাপ্লিকেশনের সঞ্চয়স্থানের প্রয়োজনীয়তা সম্পর্কে চিন্তা করেন, তখন এটি দুটি বিভাগে যা সংরক্ষণ করা হচ্ছে তা ভাঙতে সহায়তা করে: ওয়েব অ্যাপ্লিকেশন লোড করার জন্য প্রয়োজনীয় মূল ডেটা এবং অ্যাপ্লিকেশনটি লোড হওয়ার পরে অর্থপূর্ণ ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় ডেটা৷

প্রথম ধরনের ডেটা, আপনার ওয়েব অ্যাপ লোড করার জন্য যা প্রয়োজন, তাতে এইচটিএমএল, জাভাস্ক্রিপ্ট, সিএসএস এবং সম্ভবত কিছু ছবি থাকে। পরিষেবা কর্মীরা , ক্যাশে স্টোরেজ API সহ, সেই মূল সংস্থানগুলি সংরক্ষণ করার জন্য প্রয়োজনীয় পরিকাঠামো প্রদান করে এবং তারপরে আপনার ওয়েব অ্যাপটি দ্রুত লোড করার জন্য পরবর্তীতে ব্যবহার করে, আদর্শভাবে সম্পূর্ণরূপে নেটওয়ার্কটিকে বাইপাস করে৷ (নতুন ওয়ার্কবক্স লাইব্রেরি বা পুরানো sw-precache মতো আপনার ওয়েব অ্যাপের বিল্ড প্রক্রিয়ার সাথে একীভূত হওয়া টুলগুলি এই ধরনের ডেটা সংরক্ষণ, আপডেট এবং ব্যবহার করার প্রক্রিয়াটিকে সম্পূর্ণরূপে স্বয়ংক্রিয় করতে পারে।)

কিন্তু তথ্য অন্য ধরনের সম্পর্কে কি? এগুলি এমন সংস্থান যা আপনার ওয়েব অ্যাপ লোড করার জন্য প্রয়োজন হয় না, তবে যা আপনার সামগ্রিক ব্যবহারকারীর অভিজ্ঞতায় একটি গুরুত্বপূর্ণ ভূমিকা পালন করতে পারে। আপনি যদি একটি ইমেজ এডিটিং ওয়েব অ্যাপ লিখছেন, উদাহরণস্বরূপ, আপনি একটি ইমেজের এক বা একাধিক স্থানীয় কপি সংরক্ষণ করতে চাইতে পারেন, যা ব্যবহারকারীদের রিভিশনের মধ্যে স্যুইচ করতে এবং তাদের কাজ পূর্বাবস্থায় ফেরানোর অনুমতি দেয়। অথবা আপনি যদি একটি অফলাইন মিডিয়া প্লেব্যাকের অভিজ্ঞতা তৈরি করেন, স্থানীয়ভাবে অডিও বা ভিডিও ফাইল সংরক্ষণ করা একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হবে। ব্যক্তিগতকৃত করা যেতে পারে এমন প্রতিটি ওয়েব অ্যাপের কিছু ধরণের রাষ্ট্রীয় তথ্য সংরক্ষণ করার প্রয়োজন হয়৷ আপনি কিভাবে জানেন যে এই ধরনের রানটাইম স্টোরেজের জন্য কতটা জায়গা পাওয়া যায় এবং আপনার ঘর ফুরিয়ে গেলে কী হয়?

অতীত: window.webkitStorageInfo এবং navigator.webkitTemporaryStorage

ব্রাউজারগুলি ঐতিহাসিকভাবে প্রিফিক্সড ইন্টারফেসের মাধ্যমে এই ধরনের আত্মদর্শনকে সমর্থন করেছে, যেমন খুব পুরানো (এবং অবচয়) window.webkitStorageInfo , এবং বেশ-পুরোনো নয়, কিন্তু এখনও অ-মানক navigator.webkitTemporaryStorage । যদিও এই ইন্টারফেসগুলি দরকারী তথ্য সরবরাহ করে, ওয়েব মান হিসাবে তাদের ভবিষ্যত নেই।

সেখানেই WHATWG স্টোরেজ স্ট্যান্ডার্ড ছবিটিতে প্রবেশ করে।

ভবিষ্যৎ: navigator.storage

স্টোরেজ লিভিং স্ট্যান্ডার্ডে চলমান কাজের অংশ হিসাবে, কয়েকটি দরকারী API StorageManager ইন্টারফেসে তৈরি করেছে, যা navigator.storage হিসাবে ব্রাউজারগুলির কাছে উন্মুক্ত। অন্যান্য অনেক নতুন ওয়েব API-এর মতো, navigator.storage শুধুমাত্র সুরক্ষিত (HTTPS বা লোকালহোস্টের মাধ্যমে পরিবেশিত) উত্সগুলিতে উপলব্ধ ।

গত বছর, আমরা navigator.storage.persist() পদ্ধতি প্রবর্তন করেছি , যা আপনার ওয়েব অ্যাপ্লিকেশনকে অনুরোধ করতে দেয় যে এটির সঞ্চয়স্থান স্বয়ংক্রিয়ভাবে পরিষ্কার করা থেকে অব্যাহতি দেওয়া হবে।

এটি এখন navigator.storage.estimate() পদ্ধতি দ্বারা যুক্ত হয়েছে, যা navigator.webkitTemporaryStorage.queryUsageAndQuota() এর আধুনিক প্রতিস্থাপন হিসাবে কাজ করে। estimate() অনুরূপ তথ্য প্রদান করে, কিন্তু এটি একটি প্রতিশ্রুতি-ভিত্তিক ইন্টারফেস প্রকাশ করে, যা অন্যান্য আধুনিক অ্যাসিঙ্ক্রোনাস API-এর সাথে সামঞ্জস্যপূর্ণ। প্রতিশ্রুতি যে estimate() রিটার্ন করে তা দুটি বৈশিষ্ট্য সমন্বিত একটি বস্তুর সাথে সমাধান করে: usage , বর্তমানে ব্যবহৃত বাইটের সংখ্যা প্রতিনিধিত্ব করে এবং quota , বর্তমান উৎপত্তি দ্বারা সংরক্ষণ করা যেতে পারে এমন সর্বাধিক বাইট প্রতিনিধিত্ব করে। (সঞ্চয়স্থান সম্পর্কিত অন্যান্য সমস্ত কিছুর মতো, কোটা সম্পূর্ণ উৎস জুড়ে প্রয়োগ করা হয়।)

যদি একটি ওয়েব অ্যাপ্লিকেশন সঞ্চয় করার চেষ্টা করে—উদাহরণস্বরূপ, IndexedDB বা Cache Storage API-ব্যবহার করে-এর উপলভ্য কোটার উপরে একটি প্রদত্ত মূল আনতে যথেষ্ট বড় ডেটা, তাহলে অনুরোধটি একটি QuotaExceededError ব্যতিক্রম সহ ব্যর্থ হবে৷

সঞ্চয়স্থানের অনুমান

ঠিক কিভাবে আপনি estimate() ব্যবহার করেন তা নির্ভর করে আপনার অ্যাপকে যে ধরনের ডেটা সঞ্চয় করতে হবে তার উপর। উদাহরণস্বরূপ, আপনি আপনার ইন্টারফেসে একটি নিয়ন্ত্রণ আপডেট করতে পারেন যাতে ব্যবহারকারীরা প্রতিটি স্টোরেজ অপারেশন সম্পূর্ণ হওয়ার পরে কতটা স্থান ব্যবহার করা হচ্ছে তা জানাতে পারেন। তারপরে আপনি আদর্শভাবে একটি ইন্টারফেস প্রদান করবেন যা ব্যবহারকারীদের ম্যানুয়ালি ডেটা পরিষ্কার করার অনুমতি দেয় যা আর প্রয়োজন নেই। আপনি এর লাইন বরাবর কোড লিখতে পারেন:

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

অনুমান কতটা সঠিক?

এই সত্যটি মিস করা কঠিন যে আপনি ফাংশন থেকে যে ডেটা ফিরে পাবেন তা কেবলমাত্র একটি উত্স যে স্থানটি ব্যবহার করছে তার একটি অনুমান। এটা ফাংশন নামের অধিকার আছে! usage বা quota মানগুলি স্থিতিশীল হওয়ার উদ্দেশ্যে নয়, তাই আপনাকে নিম্নলিখিতগুলি বিবেচনায় নেওয়ার পরামর্শ দেওয়া হচ্ছে:

• usage প্রতিফলিত করে যে প্রদত্ত উত্স কার্যকরভাবে একই-উৎস ডেটার জন্য কতগুলি বাইট ব্যবহার করছে, যা অভ্যন্তরীণ কম্প্রেশন কৌশল দ্বারা প্রভাবিত হতে পারে, নির্দিষ্ট-আকারের বরাদ্দকরণ ব্লক যা অব্যবহৃত স্থান অন্তর্ভুক্ত করতে পারে এবং "টম্বস্টোন" রেকর্ডগুলির উপস্থিতি যা হতে পারে একটি মুছে ফেলার পরে সাময়িকভাবে তৈরি করা হয়েছে। সঠিক আকারের তথ্য ফাঁস রোধ করতে, ক্রস-অরিজিন, স্থানীয়ভাবে সংরক্ষিত অস্বচ্ছ সম্পদ সামগ্রিক usage মূল্যে অতিরিক্ত প্যাডিং বাইট অবদান রাখতে পারে।
• quota বর্তমানে একটি উত্সের জন্য সংরক্ষিত স্থানের পরিমাণ প্রতিফলিত করে। মানটি সামগ্রিক স্টোরেজের আকারের মতো কিছু ধ্রুবক কারণের উপর নির্ভর করে, তবে বর্তমানে অব্যবহৃত স্টোরেজ স্পেসের পরিমাণ সহ অনেকগুলি সম্ভাব্য উদ্বায়ী কারণের উপর নির্ভর করে। সুতরাং একটি ডিভাইসে অন্যান্য অ্যাপ্লিকেশনগুলি ডেটা লিখতে বা মুছে ফেললে, ব্রাউজারটি আপনার ওয়েব অ্যাপের উত্সের জন্য যে পরিমাণ স্থান দিতে ইচ্ছুক তা সম্ভবত পরিবর্তিত হবে৷

বর্তমান: বৈশিষ্ট্য সনাক্তকরণ এবং ফলব্যাক

estimate() Chrome 61-এ শুরু করে ডিফল্টরূপে সক্ষম করা হয়েছে। ফায়ারফক্স navigator.storage নিয়ে পরীক্ষা-নিরীক্ষা করছে, কিন্তু, আগস্ট 2017 পর্যন্ত, এটি ডিফল্টরূপে চালু করা হয়নি। এটি পরীক্ষা করার জন্য আপনাকে dom.storageManager.enabled পছন্দ সক্রিয় করতে হবে।

সমস্ত ব্রাউজারে এখনও সমর্থিত নয় এমন কার্যকারিতা নিয়ে কাজ করার সময়, বৈশিষ্ট্য সনাক্তকরণ আবশ্যক। আপনি পুরানো navigator.webkitTemporaryStorage পদ্ধতিগুলির উপরে একটি প্রতিশ্রুতি-ভিত্তিক র‍্যাপারের সাথে বৈশিষ্ট্য সনাক্তকরণকে একত্রিত করতে পারেন যাতে একটি ধারাবাহিক ইন্টারফেস প্রদান করা যায়:

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